How to wait for images loaded with javascript?

Question

I have a div in which I am appending imgs. Images are loading with AJAX by 20 items. They are showing with jQuery animation. A problem that animation is retarding. I think that there are 2 problems:

1. Images for showing are not downloaded and i want to display them now
2. When I set css display: block to img, I get delay when browser painting image

So the question is how to wait for pack of images (20 items) is downloaded and how to dispose of the painting delay?

P/S. If I show empty divs (just set them background-color) or 1 image for all img-tags the animation works quickly.

Answer 1

You can use this snippet. It doesn't depend on any library and is working well for our projects.

/*
 * Preload an image if not cached, then call a callback function
 * @param {String} the image url
 * @param {Function} the callback function
*/
function loadImg(url, fn) {
    var img = new Image();
    img.src = url;
    if (img.complete) { // If the image has been cached, just call the callback
        if (fn) fn.call(img, true);
    } else {
        img.onerror = function() { // If fail to load the image
            if (fn) fn.call(img, false);
        };
        img.onload = function() { // If loaded successfully
            if (fn) fn.call(img, true);
            //On IE6, multiple frames in a image will fire the 'onload' event for multiple times. So set to null
            img.onload = null; 
        };
    };
}

For your scenario, you can pass in a callback function like:

var callback = function(loaded) {
    if (loaded === true) {
        // do the animation. 
        var img = this; // now `this` points to the image itself.
    } else {
        // show default image or 'image failed to load'.
    }
}

Answer 2

You can use my jQuery plugin to wait for the images to download in your new element.

$('#container').waitForImages().done(function() { 
  $(this).addClass('ready');
});

Answer 3

You can either preload the images ahead of time (so they are all ready in the cache and won't have any delay when loading) or you can load them when needed and use a notification when they are loaded before starting the animation. Either way, you need to make sure the images are loaded before starting the animation if you want a smooth running animation.

You can see these other references for how to preload images with code samples. The first reference supports a callback that will get called when all the images have been loaded:

Image preloader javascript that supports events

Is there a way to load images to user's cache asynchronously?

How do you cache an image in Javascript

Answer 4

Use .complete of javascript

<img src="http://www.zastavki.com/pictures/originals/2013/Photoshop_Image_of_the_horse_053857_.jpg" id="something" />

var myVar = setInterval(function(){
    console.log("loading")
    if( document.getElementById("something").complete ) { // checks if image is loaded
        console.log( "loaded" );
        clearInterval(myVar);
    }
}, 500);

here is jsfiddle demo.