jquery images按图像加载图像

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);" />？

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

$("#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循环将确保如果图像被缓存，它将在其上触发加载事件。

Answer 4

您可以使用jQuery load事件：

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

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

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

Answer 5

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

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

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

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