jquery：一个接一个地淡入图像

我有一个页面，里面有10个图片，我想在下载完图片后，一个接一个地淡入淡出。如何检测图像已加载并准备显示？我是否应该循环加载的图像fadeIn，并在fadeIn之后等待下一个加载？

您可以预加载图像maybe（），然后在循环中依次调用fadeIn和fadeout方法。

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

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

（根据克里斯·埃里克森的回答）

您可以通过在将事件添加到DOM之前将其添加到映像中来避免潜在的竞争条件（未确认，但我希望安全起见）。这种方法也适用于相互重叠的淡入淡出图像

#images_container {
   position: relative;
}

#images_container {
   position: absolute;
}

这就是我在gallery控件中使用的，我在另一个图像的顶部添加一个图像，然后淡入-如果我已经添加了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();
}

---

使预加载部分正常工作，但在知道图像已预加载之前，我不想使图像淡入。您可以使用刚刚加载的图像对象的onLoad事件，如下所示：objImage.onLoad=imagesLoaded（）；。图像加载后调用imagesLoaded函数。将您的fadein fadeout内容放在那里。因此，load函数仅在图像完全下载后才执行吗？是的，在加载图像时会执行。您可以在此处看到它的作用：（只要jsbin保留片段）。

#images_container {
   position: relative;
}

#images_container {
   position: absolute;
}