Question

我知道有很多方法可以检测图像是否以传统方式加载（即<img src="bar.jpg"/>，但是有没有办法检测图像何时完全加载内联（如<div class="foo" style="background-image: url(bar.jpg)">）？

我通过FilePicker上传图片，然后将图片设置为父div的背景图片。

Answer 1

窗口load事件表示页面中的所有图片都已加载。

来自MDN：

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

在初始加载页面HTML中指定的资源页面时会发生这种情况。

如果要将图像动态设置为背景图像，则无法加载该背景图像的时间。如果您想知道何时加载了该图像，您可以自己将其加载到图像对象中并观察该图像对象的onload处理程序，然后在加载时，您可以将其设置为背景图像。它将在此时缓存，因此背景将立即显示。

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

Answer 2

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

但是，如果您已经在使用jQuery（正如您的问题中的标记所示），您可以使用.on（“load”，...）来实现相同的功能。

http://api.jquery.com/load-event/

注意，.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正在做一些非常昂贵的背景图片加载，你应该看到文档就绪和第一个加载窗口之间的时间明显滞后。

检测内联图像加载

2 个答案: