使用jQuery，我如何检查所有图像何时加载到动态dom结构中？

I'm adding dynamic content (including images) to the body. I want to be able to tell when the images within the new dynamic dom structure are all finished loading.

我正在向身体添加动态内容(包括图像)。我希望能够判断新动态dom结构中的图像何时完成加载。

HTML:

<button>
  Add dynamic content
</button>

JS:

$(document).ready(function() {
  // Append new .dynamic-container divs to the body
  $('button').click(function() {
    var newElement = $('<div class="dynamic-container"><div class="images-container"><img src="https://s3-us-west-2.amazonaws.com/cdn.simplyrets.com/properties/trial/home4.jpg" /><img src="https://s3-us-west-2.amazonaws.com/cdn.simplyrets.com/properties/trial/home-inside-4.jpg" /><img src="https://s3-us-west-2.amazonaws.com/cdn.simplyrets.com/properties/trial/home15.jpg" /><img src="https://s3-us-west-2.amazonaws.com/cdn.simplyrets.com/properties/trial/home12.jpg" /><img src="https://s3-us-west-2.amazonaws.com/cdn.simplyrets.com/properties/trial/home-inside-15.jpg" /></div></div>');

    $('body').append(newElement);

    // Perform an operation whenever all images are loaded within a newly created div.dynamic-container element
    newElement.on('load', 'img', function(){
      alert('all images have loaded');
    });
  });
});

Unfortunately this is not working. What am I missing?

不幸的是,这不起作用。我错过了什么?

I have created a JsFiddle to show what I'm doing: https://jsfiddle.net/cseckler/y3mpo37d/

我创建了一个JsFiddle来展示我正在做的事情:https://jsfiddle.net/cseckler/y3mpo37d/

1 个解决方案

#1

You can't rely on the load event if you append the images to the document (or even create them with a src) prior to hooking load, so what you want to do is check for completed images; see comments:

如果在挂钩加载之前将图像附加到文档(或者甚至使用src创建它们),则不能依赖加载事件,因此您要做的是检查完成的图像;看评论:

// Perform an operation whenever all images are loaded within a newly created div.dynamic-container element
var imgs = newElement.find("img[src]"); // [src] = skip ones with no source
imgs.on("load", checkImages);
checkImages();

function checkImages() {
  var counter = 0;
  imgs.each(function() {
    if (this.complete) {
        ++counter;
    }
  });
  if (counter === imgs.length) {
    imgs.off("load", checkImages);
    // They're all loaded or failed; perform your operation
  }
}

Live Example:

$(document).ready(function() {
  // Append new .dynamic-container divs to the body
  $('button').click(function() {
    var newElement = $('<div class="dynamic-container"><div class="images-container"><img src="https://s3-us-west-2.amazonaws.com/cdn.simplyrets.com/properties/trial/home4.jpg" /><img src="https://s3-us-west-2.amazonaws.com/cdn.simplyrets.com/properties/trial/home-inside-4.jpg" /><img src="https://s3-us-west-2.amazonaws.com/cdn.simplyrets.com/properties/trial/home15.jpg" /><img src="https://s3-us-west-2.amazonaws.com/cdn.simplyrets.com/properties/trial/home12.jpg" /><img src="https://s3-us-west-2.amazonaws.com/cdn.simplyrets.com/properties/trial/home-inside-15.jpg" /></div></div>');

    $('body').append(newElement);

    // Perform an operation whenever all images are loaded within a newly created div.dynamic-container element
    var imgs = newElement.find("img[src]"); // [src] = skip ones with no source
    imgs.on("load", checkImages);
    checkImages();

    function checkImages() {
      var counter = 0;
      imgs.each(function() {
        if (this.complete) {
            ++counter;
        }
      });
      if (counter === imgs.length) {
        imgs.off("load", checkImages);
        // They're all loaded or failed; perform your operation
        console.log("All done!");
      }
    }
  });
});

img {
	max-width: 300px;
}

<button>
  Add dynamic content
</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

That uses the complete flag on img elements:

这使用了img元素的完整标志:

The IDL attribute complete must return true if any of the following conditions is true:

如果满足以下任一条件,则IDL属性complete必须返回true:

The src attribute is omitted.

src属性被省略。

The final task that is queued by the networking task source once the resource has been fetched has been queued.

一旦获取资源,网络任务源排队的最终任务已排队。

The img element is completely available.

img元素完全可用。

The img element is broken.

img元素被破坏了。

Otherwise, the attribute must return false.

否则,该属性必须返回false。

(Note: "attribute" in the above doesn't mean "attribute" in the HTML sense, just the IDL sense; complete is a property.)

(注意:上面的“属性”并不意味着HTML意义上的“属性”,只是IDL意义;完全是属性。)

#1