Question

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

Answer 1

只需在图像上使用load（）事件即可。 E.g。

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

Answer 2

您可以预加载图像（See here），然后循环调用fadein和fadeout方法。

Answer 3

（根据Kris Erickson的回答）

您可以通过在将图像添加到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;
}

jquery：图像后淡入图像

3 个答案: