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

我正在向主体添加动态内容（包括图像）。我想知道新的动态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');
    });
  });
});

$（文档）.ready（函数（）{
//将新的.dynamic容器div追加到主体
$（“按钮”）。单击（函数（）{
var newElement=$（''）；
$（'body'）.append（新元素）；
//每当在新创建的div.dynamic-container元素中加载所有图像时，执行操作
newElement.on（'load'，'img'，function（）{
警报（“已加载所有图像”）；
});
});
});

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

---

我已经创建了一个JSFIDLE来显示我正在做什么：

如果在挂起

加载

之前将图像附加到文档中（或者甚至使用

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

实例：

$（文档）.ready（函数（）{
//将新的.dynamic容器div追加到主体
$（“按钮”）。单击（函数（）{
var newElement=$（''）；
$（'body'）.append（新元素）；
//每当在新创建的div.dynamic-container元素中加载所有图像时，执行操作
var imgs=newElement.find（“img[src]”；//[src]=跳过没有源的部分
imgs.on（“加载”，检查图像）；
检查图像（）；
函数checkImages（）{
var计数器=0；
imgs.each（函数（）{
如果（完成此项）{
++计数器；
}
});
如果（计数器===imgs.length）{
imgs.off（“加载”，检查图像）；
//它们都已加载或失败；请执行您的操作
log（“全部完成！”）；
}
}
});
});
img{
最大宽度：300px；
}

添加动态内容