如何检测背景图像何时加载？

检测背景图像加载状态

渴望在成功加载正文标签的背景图像时触发一些代码？介绍这个难以解决的问题的解决方案：

使用 $().load() 的初始方法由于其对 DOM 元素（不包括背景图像）的限制而失败。相反，我们采用以下策略：

1. 创建一个新的图像元素并设置其 src 属性以匹配目标背景图像的 URL。
2. 利用“load”事件侦听器来捕获图像加载完成。

在 jQuery 中，该技术翻译为到：

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

在 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中文网其他相关文章！