预加载图像并将它们用作 div 元素的背景答案

【问题标题】：Preload images and use them as backgound of div element预加载图像并将它们用作 div 元素的背景
【发布时间】：2020-10-29 02:42:44
【问题描述】：

我正在运行一个非常简单的幻灯片放映，它会在一段时间后更改 div 的背景。问题是图像加载速度太慢，并且在图像更改之间出现空白屏幕。现在我想预加载图像，我找到了these answers，但它们不起作用，并且：

var myImage = new Image();
myImage.src = 'picture.jpg';

我可以以某种方式将此myImage 用作 div 的背景图像吗？或者您知道任何其他预加载背景图像的方法吗？

使用:after 伪元素不起作用。

【问题讨论】：

也许可以试试这个：stackoverflow.com/a/61762176/8620333
请提供您尝试过的确切代码，或至少提供minimal, reproducible example。

标签： javascript html css background-image preload

【解决方案1】：

您可以使用 blob 和 URL.createObjectURL() 来做到这一点。

let imgUrl = "https://i.imgur.com/VG2UvcY.jpg";

const preloadBtn = document.getElementById("preload-btn"),
      showBtn = document.getElementById("show-btn");


preloadBtn.addEventListener("click", async () => {
  imgUrl = URL.createObjectURL(
    await (await fetch(imgUrl)).blob()
  );
  preloadBtn.disabled = true;
});

showBtn.addEventListener("click", () => {
  document.body.style.backgroundImage = `url("${imgUrl}")`
});

body {
  background-size: cover;
}

<button id="preload-btn">Preload big image</button>
<button id="show-btn">Show big image</button>

【讨论】：