Hide images on document ready, fade in each image as it is loaded

Question

I'm trying to write a Jquery script that fades in Images as they are loaded, by using setInterval.

My current code is not working-- the "image-loading" class is not getting removed.

So two questions: 1) Why isn't the code working, and 2) is this the best way to accomplish what I want to do? Is there a better way?

   (function($) {

        var $props = $('#properties'),
            $imgs = $props.find("img");

        $imgs.addClass('image-loading');

        (function updateImages() {
            setTimeout(function() {

                $imgs.each(function(){
                    $me = $(this);

                    // If image is loaded, remove class
                    $me.load(function(){
                        $me.removeClass('image-loading');
                    });
                });

                // if all images are loaded, stop the loop
                $imgs.load(function () {
                    return false;
                });

                updateImages();
            }, 100);
        })();

    })(jQuery);

possible duplicate of [Making images fade in on image load using jquery](http://stackoverflow.com/questions/1700864/making-images-fade-in-on-image-load-using-jquery) — Diodeus - James MacFarlane, Feb 17 '12 at 15:51

karim79 · Accepted Answer · 2012-02-17T16:05:25.283

That looks like a partial implementation. Try this:

(function($) {

    var $props = $('#properties'),
        $imgs = $props.find("img"),
        loadCounter = 0, // you init these, but never use them?
        nImages = $imgs.length;

    $imgs.addClass('image-loading');

    (function updateImages() {
        setTimeout(function() {
            $imgs.one("load", function() {

                $(this).removeClass('image-loading');

            // to manually trigger onload if image is in cache
            }).each(function () {
                if (this.complete) {
                    $(this).trigger("load");
                }
            });
            updateImages();
        }, 100);
    })();

})(jQuery);

Demo here.

score 1 · Answer 2 · answered Feb 17 '12 at 15:57

I have a plugin that may help you with this. Include the jQuery preloadImages plugin and then try this code:

properties.preloadImages(function(){
  // this refers to the image that is done loading.
  $(this).removeClass("image-loading");
})/*.done(function(){
  alert("All images are loaded!");
})*/;

Edit for Clarification:
This code would replace (function updateImages(){...})()

score 0 · Answer 3 · answered Feb 18 '12 at 21:32

I ended up using the following jQuery plugin:

https://github.com/farinspace/jquery.imgpreload

The syntax is super easy:

        var $imgs = $('#properties').find("img");

        $imgs.imgpreload({
            each: function() {
                $(this).removeClass('image-loading');
            }
        });

It's alot lighter weight and more straightforward than the code I had originally tried to hack together. And it does exactly what I want it to do.

Hide images on document ready, fade in each image as it is loaded

3 Answers3