javascript - 如何延迟加载 CSS 背景图片？

Question

我在 HTML/JavaScript 游戏中通过显示/隐藏/重新定位许多 div 来制作动画 Sprite ，每个 div 都有一个 CSS 背景图像。

我想只在第一次需要时加载一些图像，而不是在第一次加载页面时加载它们。

最初将它们全部设置为“display:none”，然后使用“display:inline”显示/隐藏它们会这样做吗？

或者我应该根据需要添加和删除 div 吗？或者还有其他方法吗？

(我已经使用各种工具优化了图像文件大小，所以这个问题专门关于找到一种方法来根据需要使用 HTML/JS 加载图像，而不是一次加载所有图像。)

Answer 1

您可以通过将背景图片的 URL 存储在关联数组中并在您希望将它们应用到 div 的 backgroundImage 样式时检索它们来实现此目的。

例子:

var resources = {div1:"url(image1.png)",div2:"url(image2.png)",div3:"url(image3.png)"};

function loadImageBG(id) {
  document.getElementById(id).style.backgroundImage = resources[id];
}

在哪里

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

是您希望为其提供背景图像的 div。