Question

我通过显示/隐藏/重新定位许多div来为HTML / JavaScript游戏中的精灵制作动画，每个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。

Answer 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函数可能需要在您的情况下进行一些返工，但是您可以使用重要的样式表函数。

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

2 个答案: