jquery - jquery images逐个加载图像

Question

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

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

我认为这是可能的imagesLoaded，但还没有设法让它发挥作用。有人吗？

其他解决方案？

score 5 · Accepted Answer

监听 imagesLoaded 进度事件。

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

score 0 · Accepted Answer

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

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

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

score 0 · Accepted Answer

使用 jQuery 试试这个：

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

或相同但语法不同：

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

还要检查这个有趣的主题：

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

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

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

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

score 0 · Accepted Answer

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

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

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

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

score 0 · Accepted Answer

您可以为此使用jQuery 加载事件：

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

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

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

5 回答 5