jquery images逐个加载图像答案

【问题标题】：jquery imagesLoaded image by imagejquery images逐个加载图像
【发布时间】：2013-01-27 20:47:47
【问题描述】：

我一直在研究一个 jquery 解决方案，该解决方案在执行某些操作（淡入淡出等）之前监听每个图像（从一堆中）何时加载。

使用imagesLoaded，我已经设法在加载所有图像时执行此操作，但我希望它在加载后独立于其他图像的状态在每个图像上执行。

我认为imagesLoaded 可以做到这一点，但还没有成功。有人吗？

其他解决方案？

【问题讨论】：

【解决方案1】：

监听 imagesLoaded 进度事件。

imagesLoaded("img").on("progress", function(imagesLoadedInstance, image) {
    // Code for each image
});

【讨论】：

【解决方案2】：

您可以将函数直接附加到 DOM，例如：<img onload="executeThisImage(imgId);" /> ?

或者你可以像 mipe34 建议的那样使用 jQuery 直接将负载绑定到它：

$("#myImage").load(function() { ... });

【讨论】：

【解决方案3】：

您可以为此使用jQuery load 事件：

$("img").load(function(event) {
    console.log(this);
});

将代码限制为某些特定的图像集可能是个好主意。例如使用一个类：

$("img.foo").load(function(event) {
    console.log(this);
});

【讨论】：

【解决方案4】：

为此，您首先需要隐藏图像：

$('img').css('display', 'none');

然后在load 事件触发时淡入：

$('img').load(function(){
    $(this).fadeIn();
});

【讨论】：

【解决方案5】：

使用 jQuery 试试这个：

$("#myImage").bind("load", function () { $(this).fadeIn(); });

或相同但语法不同：

$("#myImage").load(function(event) {
    $(this).fadeIn();
});

还可以在 SO 上查看这个有趣的主题：

第二个真的很有趣。即使图像被浏览器缓存，有一个解决方案如何使它工作。

关注此主题的最佳答案。我看到了最好的解决方案，例如：

$("#myImage").one('load', function() {
  $(this).fadeIn();
}).each(function() {
  if(this.complete) $(this).load();
});

这里使用one 进行事件绑定，以确保事件处理程序最多执行一次。 each 循环将确保如果图像被缓存，它将触发其上的加载事件。

【讨论】：