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="newimage.jpg tag.

I know how to wait for the reply from the script but I don't know how to tell when the image is fully loaded (when it is, I want to display it). What I get now is the image loading slowly so the user is seeing this "loading" process. Instead, I want to have a msg telling the user to wait while the image is loading, only then I want to display the image.

Answer 1

Image Loading

Wait for ajaxRequest

Answer 2

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 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);