javascript - 使加载在 jquery 上的图像淡入单个图像

Question

这是示例 html 结构：

<div class=container>
    <div class=green></div>
    <div class=green></div>
    <div class=green></div>
    <div class=green></div>
</div>

以下代码有效：

 $('.container').imagesLoaded(function(){
    $('.green').find('img').fadeIn(444);
});

唯一的缺点是它等待所有图像加载，然后同时淡入它们。如何让每个图像在完成加载后立即加载，而不是等待所有图像加载。

我已经尝试过了，但它不起作用：

    $('.green').imagesLoaded(function(){                    
        $(this).find('img').fadeIn(444);
    });

Answer 1

我遇到了同样的问题，发现您需要将 imagesLoaded 插件绑定到这样.green的方法内部.each()：

$('.container').find('.green').each(function () {
    var _this = $(this);

    _this.imagesLoaded(function () {
        _this.find('img').fadeIn(444);
    });
});

Answer 2

是的，这通常是一个相当基本的问题：某些图像在您为它们分配加载事件处理程序之前完成加载。当图像被缓存时，这种情况尤其可能发生。

如果图像在 HTML 中，不幸的是，唯一可靠的方法是包含一个（非常丑陋的）内联 onload 属性：

<img src="..." alt="..." onload="$(this).fadeIn();">

Answer 3

尝试类似::

jQuery.fn.eachLoaded = function(fn){
   return this.each(function(){
     // if already loaded call callback
     if (this.complete || this.readyState == 'complete'){
       fn.call(this);
     } else { // otherwise bind onload event
       $(this).load(fn);
     }
   });
}
$('.green img').eachLoaded(function(){
  $(this).fadeIn(444)
});