Javascript 检测内联图像加载

我知道有很多方法可以检测图像是否以传统方式加载（即

），但是有没有方法可以检测图像何时完全以内联方式加载（如，

）

---

我通过FilePicker上传图像，然后将图像设置为父分区的背景图像。

窗口

load

事件表示页面中的所有图像都已加载

发件人：

加载事件在文档加载过程结束时激发。在 此时，文档中的所有对象都在DOM中，并且 图像和子帧已完成加载

这在页面的HTML中指定的资源的页面初始加载期间发生

---

如果您将图像动态设置为背景图像，则加载该背景图像的时间不会发生任何事件。如果您想知道该图像是何时加载的，可以自己将其加载到图像对象中，并查看该图像对象的onload处理程序，然后在加载时将其设置为背景图像。It将缓存在该点，以便立即显示背景

function setBackgroundNotify(imgURL, targetObj, callback) {
    var img = new Image();
    img.onload = function() {
        targetObj.style.backgroundImage = "url(" + imgURL + ")";
        callback();
    };
    img.src = imgURL;
}

---

@jfriend00是正确的。这个答案的优点是不依赖于其他库

但是，如果您已经在使用jQuery（正如您问题上的标记所示），那么可以使用.on（“load”，…）实现同样的功能

注意，.load（…）快捷方式已被弃用，因此请使用.on（“load”，…）相反。这至少比window.onload有一个优势。它允许多个事件处理程序排队，而无意中重新分配window.onload会将处理程序吹走。此外，如果浏览器与window.onload不兼容，jQuery解决方案可能会自动处理它们

您可以（或多或少）向自己证明，它正在使用一点评测：

$(document).ready(function() {
  console.log("Document ready at " + Date.now());
});
$(window).on("load", function() {
  console.log("First window on load at " + Date.now());
});
$(window).on("load", function() {
  console.log("Second window on load at " + Date.now());
});

---

假设你有一些div正在进行一些非常昂贵的背景图像加载，你应该会看到文档准备就绪和加载第一个窗口之间的明显时间延迟。

该死，这太糟糕了。不过我也这么认为……互联网并没有考虑到动态元素。谢谢你的快速回复！