jquery imagesLoaded逐个图像

Question

我一直在寻找一个jquery解决方案，它在执行某些操作(fadein等)之前监听每个图像(从一组图像中)何时被加载。

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

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

其他解决方案？

Answer 1

收听imagesLoaded进度事件。

(https://github.com/desandro/imagesloaded)

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

Answer 2

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

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

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

Answer 3

尝试使用jQuery：

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

或者用不同的语法相同：

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

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

• jQuery How do you get an image to fade in on load?
• jQuery callback on image load (even when the image is cached)

第二个非常有趣。有一个解决方案，如何使它即使在图像被浏览器缓存时也能工作。

遵循这个主题的最佳答案。我认为最好的解决方案如下：

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

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