使加载到jquery上的图像在单个图像中淡入淡出
使加载到jquery上的图像在单个图像中淡入淡出
提问于 2013-09-03 10:46:59
这是示例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);
});回答 3
Stack Overflow用户
发布于 2015-01-29 20:54:23
我也遇到过同样的问题，我发现您需要将imagesLoaded插件绑定到.each()方法中的.green，如下所示：
$('.container').find('.green').each(function () {
var _this = $(this);
_this.imagesLoaded(function () {
_this.find('img').fadeIn(444);
});
});Stack Overflow用户
发布于 2013-09-03 10:56:39
是的，这通常是一个相当基本的问题:一些图像在您为它们分配一个load事件处理程序之前就完成了加载。当图像被缓存时，这种情况尤其可能发生。
不幸的是，如果图像是HTML格式的，那么唯一可靠的方法就是包含一个(极其丑陋的) inline onload属性：
<img src="..." alt="..." onload="$(this).fadeIn();">Stack Overflow用户
发布于 2013-09-03 11:15:32
尝试如下所示：：
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)
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18583346
复制相关文章
相似问题
腾讯云开发者
