jquery：在图像后淡入图像

我有一个包含10个图像的页面，并且我希望在图像下载完毕后将它们逐个淡入淡出。我如何检测图像已加载并准备好显示？我应该循环通过加载的图像fadeIn和一旦褪色在等待下一个加载？jquery：在图像后淡入图像

2009-08-18 monkeylee

只需在图像上使用load（）事件即可。例如。

$('#some_image').hide() 
    .load(function() { 
     $(this).fadeIn(); 
    }) 
    .attr('src', 'images/headshot.jpg')

来源

2009-08-18 15:21:21

那么只有在图像完全下载后才能执行加载功能？ – monkeylee 2009-08-18 15:27:02

是的，它发生在图像加载时。 – 2009-08-18 16:54:51

你可以在这里看到它的行动：http://jsbin.com/ejesu/edit（只要jsbin保留片段）。 – 2009-08-18 17:06:36

您可以预先加载图像（See here），然后在循环中依次调用淡入淡出和淡出方法。

来源

2009-08-18 15:16:51 maxpower47

得到了预加载部分工作，但我不想淡入图像，直到我知道它已被预装？ – monkeylee 2009-08-18 15:22:36

您可以使用刚加载的图像对象的onLoad事件，如下所示：objImage.onLoad = imagesLoaded（）;.在加载图像后调用imagesLoaded函数。把你的淡入淡出的东西放在那里。 – maxpower47 2009-08-18 16:00:15

（基于克里斯埃里克森的回答）

您可以通过将事件的图像将它添加到DOM（未经证实之前，以避免潜在的竞争条件，但我喜欢玩安全）。这种方法也适用于彼此之间的图像淡化。

这是我用于图库控件的地方，我在另一图像上添加图像并淡入其中 - 然后删除底部图像（如果我已经添加了2张图像）。

var url = .....; 
var container = $('#images_container'); 

$("<img />").hide().load(function() { 
    $(this).fadeIn(); 
}).attr('src', url).appendTo($(container)); 

if ($(container).children().length > 2) { 
    $(":nth-child(1)", container).remove(); 
}

这里的HTML：

<div id="images_container"></div>

的CSS必须设置这样或图像将堆栈上而不是在彼此的顶部。

#images_container { 
    position: relative; 
} 

#images_container { 
    position: absolute; 
}

来源

2011-04-28 05:48:55

jquery：在图像后淡入图像

回答

相关问题