Спрятать изображения на готовом документе, затемнить каждое изображение при его загрузке

Question

Я пытаюсь написать скрипт Jquery, который исчезает в изображениях по мере их загрузки, используя setInterval.

Мой текущий код не работает - класс "загрузки изображений" не удаляется.

Итак, два вопроса: 1) почему код не работает, и 2) это лучший способ выполнить то, что я хочу сделать?Есть ли лучший способ?

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

Answer 1

Это похоже на частичную реализацию.Попробуйте это:

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

Демо здесь.

Answer 2

У меня есть плагин, который может помочь вам в этом. Включите плагин jQuery preloadImages и попробуйте этот код:

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

Изменить для уточнения:
Этот код заменит (function updateImages(){...})()

Answer 3

Я использовал следующий плагин jQuery:

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

Синтаксис очень прост:

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

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

Это намного легче и проще, чем код, который я первоначально пытался взломать вместе. И он делает именно то, что я хочу.