How do I wait for an image to load after an ajax call using jquery?

Question

I have a Python script that is doing some manipulation on a JPEG image. I pass some parameters to this script and call it from my HTML page. The script returns an img src=\"newi

Answer 1

You can dynamically create a new image, bind something to its load event, and set the source:

$('<img>').bind('load', function() {
    $(this).appendTo('body');
}).attr('src', image_source);

Answer 2

Image Loading

Wait for ajaxRequest

Answer 3

The other answers have mentioned how to do so with jQuery, but regardless of library that you use, ultimately you will be tying into the load event of the image.

Without a library, you could do something like this:

var el = document.getElementById('ImgLocation');

var img = document.createElement('img');
img.onload = function() {
    this.style.display = 'block';
}
img.src = '/path/to/image.jpg';
img.style.display = 'none';

el.appendChild(img);