jquery - jquery：图像后淡入淡出

Question

我有一个包含 10 张图片的页面，一旦下载了图片，我想将它们一个接一个地淡入淡出。如何检测图像已加载并准备好显示？我应该遍历加载的图像fadeIn 并且一旦fadeIn 等待下一个加载吗？

Answer 1

只需在图像上使用 load() 事件。例如

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

Answer 2

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

Answer 3

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

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