ansaurus

Question

How can I delay the loading of CSS background images?

Answer 1

A:

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.

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.

Robusto 2010-08-11 20:58:16

Nitpick: the term in JavaScript would be “object” rather than “associative array”.

Paul D. Waite 2010-08-11 22:13:05

@Paul D. Waite: http://www.quirksmode.org/js/associative.html I know the name for the term. I used "associative array" to illustrate a point and teach a principle. I might as easily (and correctly) have called it a hash. If I call my car "my ride" you know what I'm talking about, and you knew what I was talking about here.

Robusto 2010-08-11 23:32:15

Oh, fair play, I just thought the term “array” might be confusing here given that JavaScript has a specific object called an array. You’re right though, it doesn’t practically matter.

Paul D. Waite 2010-08-13 00:18:42

Answer 2

A:

You can create your CSS properties dynamically using Javascript instead of a static .css file.

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.

Mic 2010-08-11 22:09:54

ansaurus

tags:

views:

answers:

How can I delay the loading of CSS background images?

related questions