如何延迟 CSS 背景图像的加载？答案

【问题标题】：How can I delay the loading of CSS background images?如何延迟 CSS 背景图像的加载？
【发布时间】：2010-08-13 10:31:31
【问题描述】：

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

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

最初是否将它们全部设置为“display:none”，然后使用“display:inline”显示/隐藏它们？

或者我应该根据需要附加和删除 div 吗？还是有其他方法可以做到这一点？

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

【问题讨论】：

标签： javascript css image optimization dom

【解决方案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。

【讨论】：

Nitpick：JavaScript 中的术语应该是“对象”而不是“关联数组”。
@Paul D. Waite:quirksmode.org/js/associative.html我知道这个词的名字。我用“关联数组”来说明一个点，教一个原理。我可能很容易（并且正确地）称它为哈希。如果我把我的车称为“我的车”，你就知道我在说什么，你也知道我在说什么。
哦，公平竞争，鉴于 JavaScript 有一个称为数组的特定对象，我只是认为术语“数组”在这里可能会令人困惑。不过你是对的，这实际上并不重要。

【解决方案2】：

您可以使用 Javascript 而不是静态 .css 文件动态创建 CSS 属性。

以下是添加和删除样式的示例：

<html>
<head>
    <title>add/remove style</title>
    <script>
        function removeStyle(id){
            var cs = document.getElementById(id);
            cs && cs.parentNode.removeChild(cs);
        }
        function addStyle(css, id){
            removeStyle(id);
            var styleNode = document.createElement("style");
            styleNode.setAttribute('type', 'text/css');
            styleNode.setAttribute('id', id);
            document.getElementsByTagName("head")[0].appendChild(styleNode);
            if(typeof styleNode.styleSheet !=='undefined'){
                styleNode.styleSheet.cssText = css; //IE
            }else{
                styleNode.appendChild(document.createTextNode(css));
            }
        }
    </script>
</head>
<body>
    <p>text to color</p>
    <input onclick="addStyle('p{color:#900}p{background:#DEF}', 'myStyle')" 
        type="button" value="add style" >
    <input onclick="removeStyle('myStyle')" type="button" value="remove style">
</body>
</html>

在您的情况下，addStyle/removeStyle 函数可能需要一些修改，但您会深入了解要使用的重要样式表函数。

【讨论】：