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

Question

I am animating sprites in a HTML/JavaScript game by showing/hiding/repositioning many divs, each with a CSS background image. 我通过显示/隐藏/重新放置许多div（每个都有CSS背景图像）来在HTML / JavaScript游戏中制作精灵动画。

I'd like to load some of the images only when they are first needed, rather than loading them all when the page is first loaded. 我只想在第一次需要它们时才加载某些图像，而不是在第一次加载页面时全部加载它们。

Will setting them all to "display:none" initially and then showing/hiding them with "display:inline" do this? 会先将它们全部设置为“ display：none”，然后使用“ display：inline”显示/隐藏它们吗？

Or should I append and remove the divs as needed? 还是应该根据需要添加和删除div？ Or is there another way to do this? 还是有其他方法可以做到这一点？

(I've already optimized the image file sizes using various tools, so this question is specifically about finding a way to load the images as needed with HTML/JS rather than all at once.) （我已经使用各种工具优化了图像文件的大小，所以这个问题专门用于寻找一种通过HTML / JS而不是一次全部加载图像的方法。）

Answer 1

You can do this by storing the URLs for the background images in an associative array and retrieving them when you wish to apply them to the backgroundImage style of the div. 为此，您可以将背景图片的网址存储在一个关联数组中，并在希望将其应用于div的backgroundImage样式时检索它们。

Example: 例：

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

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

where 哪里

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

are the divs you wish to supply background images for. 是您希望为其提供背景图像的div。

Answer 2

You can create your CSS properties dynamically using Javascript instead of a static .css file. 您可以使用Javascript（而不是静态.css文件）动态创建CSS属性。

Here is an example to add and remove styles: 这是添加和删除样式的示例：

<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>

The addStyle/removeStyle functions will probably need some rework in your case, but you get inside the important stylesheet functions to use. 在您的情况下，addStyle / removeStyle函数可能需要重新处理，但是您可以使用重要的样式表函数。

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

问题描述

2 个解决方案

解决方案1
0 已采纳 2010-08-11 20:58:16

解决方案2
0 2010-08-11 22:09:54

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

问题描述

2 个解决方案

解决方案1 0 已采纳 2010-08-11 20:58:16

解决方案2 0 2010-08-11 22:09:54

解决方案1
0 已采纳 2010-08-11 20:58:16

解决方案2
0 2010-08-11 22:09:54