1

我有一个简单的 html，我希望在加载最后一张图像后触发一个事件，或者如果加载的最后一张图像出现错误。这是我的代码

html

<div id="compare-table-scrollable">
    <img src="www.bla.com/1.png" />
    <img src="www.bla.com/2.png" />
    <img src="www.bla.com/3.png" />
</div>

jQuery

var imageCount = $('#compare-table-scrollable img').length;
var counterIMG = 0;
$('#compare-table-scrollable img').one("load error",function(){
           counterIMG++;
           if (counterIMG == imageCount)  // do stuff when all have loaded
           {
                alert(counterIMG);
           }
});

这是我的小提琴

4

2 回答 2

2

这是我不久前自己写的。它与您上面的内容非常相似，但更强大...

function onImagesLoaded($container, callback) {
    var $images = $container.find("img");
    var imgCount = $images.length;
    if (!imgCount) {
        callback();
    } else {
        $("img", $container).each(function () {
            $(this).one("load error", function () {
                imgCount--;
                if (imgCount == 0) {
                    callback();
                }
            });
            if (this.complete) $(this).load();
        });
    }
}

以及如何使用它...

onImagesLoaded($("#compare-table-scrollable"), function() {
    alert("images loaded");
});

注意添加if (this.complete)，它允许函数对缓存的图像进行计数，因此在调用函数之前加载。

于 2013-09-30T15:59:18.953 回答
0

直到页面加载过程的很晚，在事件已经触发之后，您才挂钩事件。注意 jsFiddle 左上角的第二个下拉框，上面写着“onload”。这是 jsFiddle非常令人惊讶的默认设置，它将您的 JavaScript 代码包装在window load事件处理程序中。在所有图像加载或加载失败之前，该处理程序不会被触发。

如果您将该下拉菜单更改为no wrap - <body>，您会收到警报：http: //jsfiddle.net/X4AmG/3/

也就是说，由于在标记中指定了图像，我担心在您的代码连接其处理程序之前会触发一个load或事件。error出于这个原因，我可能会做这样的事情：

// Get the images
var imgs = $('#compare-table-scrollable img');

// Schedule the first check for DOM ready
$(checkForImagesDone);

// Our check function
function checkForImagesDone()
{
  var counter = 0;
  imgs.each(function()
  {
    if (this.complete)
    {
      ++counter;
    }
  });
  if (counter === imgs.length)
  {
    alert("All complete");
  }
  else
  {
    setTimeout(checkForImagesDone, 50); // 50ms
  }
}
于 2013-09-30T15:53:49.193 回答