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

Demo here.

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

它比我原本试图破解的代码更轻，更直接。它完全符合我的要求。

隐藏文档准备就绪的图像，在加载时淡入每个图像

3 个答案: