jquery：图像后淡入图像

我有一个包含10张图像的页面，我想在下载图像后一个接一个地淡化它们。 如何检测图像已加载并准备显示？ 我应该循环加载图像fadeIn和fadedIn等待下一次加载吗？

Answer 1

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

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

Answer 2

您可以预加载图像（ 参见此处 ），然后在循环中依次调用fadein和fadeout方法。

Answer 3

（根据Kris Erickson的回答）

您可以通过在将图像添加到DOM之前将事件添加到图像来避免潜在的竞争条件（未经证实但我喜欢安全地播放）。 此方法也适用于彼此重叠的图像。

这是我用于图库控件的地方，我在另一个图像的顶部添加图像并将其淡入 – 然后如果我已经添加了2个图像，则删除底部图像。

 var url = .....; var container = $('#images_container'); $("").hide().load(function () { $(this).fadeIn(); }).attr('src', url).appendTo($(container )); if ($(container).children().length > 2) { $(":nth-child(1)", container).remove(); } 

这是HTML：

必须像这样设置CSS，否则图像将堆叠而不是彼此重叠。

 #images_container { position: relative; } #images_container { position: absolute; }