如何可靠地检查背景图像是否已加载？

使用背景图像加载器

您正在尝试通过在 body 标签上设置背景图像来检查背景图像是否已加载然后使用 load() 函数。但是，这种方法对于背景图像不起作用。

要真正确保背景图像已完全加载，您可以利用不同的技术：

$('<img/>').attr('src', 'http://picture.de/image.png').on('load', function() {
   $(this).remove(); // prevent memory leaks
   $('body').css('background-image', 'url(http://picture.de/image.png)');
});

此方法创建一个内存中的新图像并向其附加加载事件侦听器。图像加载后，将触发 load 事件，并在 body 标签上设置背景图像。

在 vanilla JavaScript 中，这可以实现为：

var src = 'http://picture.de/image.png';
var image = new Image();
image.addEventListener('load', function() {
   body.style.backgroundImage = 'url(' + src + ')';
});
image.src = src;

您可以还创建一个抽象函数来处理图像加载并返回一个承诺：

function load(src) {
    return new Promise((resolve, reject) => {
        const image = new Image();
        image.addEventListener('load', resolve);
        image.addEventListener('error', reject);
        image.src = src;
    });
}

const image = 'http://placekitten.com/200/300';
load(image).then(() => {
   body.style.backgroundImage = `url(${image})`;
});

这种方法允许您可靠地检查背景图像加载的完成情况，并确保仅在图像加载后才执行代码满载。

以上是如何可靠地检查背景图像是否已加载？的详细内容。更多信息请关注PHP中文网其他相关文章！