使用jQuery，如何檢查所有圖片是否都已裝入動態dom結構中？

Question

我正在向身體添加動態內容（包括圖像）。 我想知道新動態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');
    });
  });
});

不幸的是，這不起作用。 我想念什么？

我創建了一個JsFiddle來顯示我在做什么： https ://jsfiddle.net/cseckler/y3mpo37d/

Answer 1

如果在掛接load之前將圖像添加到文檔（甚至使用src創建圖像），則不能依賴load事件，因此，您要做的就是檢查完整的圖像； 看評論：

// 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
  }
}

現場示例：

 $(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> 

在img元素上使用complete標志 ：

如果滿足以下任一條件，則IDL屬性complete必須返回true：

• 省略src屬性。
• 一旦資源被獲取，聯網任務源將要排隊的最終任務已排隊。
• img元素完全可用。
• img元素已損壞。

否則，該屬性必須返回false。

（注意：上面的“屬性”在HTML含義上並不意味着“屬性”，而只是IDL含義； complete是一個屬性 。）