javascript - 如何捕获在同一页面上多次加载的图像上的图像加载事件？

Question

我有一个动态变化的页面，其中有时会插入图像。 我想知道图像(具有给定的 img src、alt 属性)加载到此页面上的每个实例。

**PS-页面上可以存在任意数量的图像(相同类型)。 图像不会被缓存，它们会动态插入到页面中。

$("img").one("load", function() {
  // do stuff
}).each(function() {
  if(this.complete) $(this).load();
});

上面的代码示例对我不起作用。

**

Answer 1

在这里你可以做一件事，你可以注册一个 DOMNodeInserted 事件，当页面中添加任何 DOM Node 时，该事件将被触发。然后你可以检查添加的元素是否是img。如果它是图像，那么您可以在其上注册 onload 事件。

$(document).on('DOMNodeInserted', function(event) {
  console.log($(event.target).is('img'));
  if($(event.target).is('img')) {
    $(event.target).one("load", function() {
      // do stuff
      console.log("one", arguments)
    });
  }
});

图像加载示例

$('body').append($("<img src='http://www.freedomwallpaper.com/nature-wallpaper/nature-hd-wallpapers-water.jpg'>"))

这将处理您的图像加载之类的事情......

您需要检查是否每次都被调用，或者父节点是否包含 chalidNode 那么它是如何处理的...但您可能需要详细查看...

另一种选择是使用 setInterval 函数，该函数每 1000 毫秒调用一次并检查任何 DOM 更改...并且您可以检查哪些图像已加载或未加载，即

setInterval(function() {
    $.each($('img'), function(index, image) {
      console.log(image.complete)
    });
}, 1000)

您可以继续采用这种方法...