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

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

它比我最初尝试拼凑起来的代码要轻得多，也更简单。它做的正是我想让它做的。