Question

我有一个动态更改页面，其中有时会插入图像。 我想知道图片（使用给定的img src，alt属性）在此页面上加载的每个时间实例。

** PS-页面上可以显示任意数量的图像（相同类型）。图像不会被缓存，它们会动态插入页面内。

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

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

**

Answer 1

在这里你可以做一件事，你可以注册一个DOMNodeInserted事件，当在页面中添加任何DOM节点时将触发该事件。然后你可以检查添加的元素是否是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'>"))

这将处理您的图像加载类型...

您需要检查是否每次调用或者parentNode是否包含chalidNode以及如何处理它...但您可能需要详细查看...

另一种选择是使用setInterval函数，该函数被称为1000毫秒，并检查是否有任何DOM变化......你可以检查是否加载了哪些图像，即

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

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

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

1 个答案: