Preload all CSS images while showing a preloader

Question

I have a website heavily loaded with images. It's quite unattractive to see the images coming up slowly. I've seen a few websites show a preloader which hides that ugly loading phase. I'm not talking about the <img /> tag here, but I'm talking about CSS background-image s.

I do not understand how to achieve this effect using Javascript and/or jQuery.

Any help would be highly appreciated.

PS: I would also appreciate links to plugins if there are any available.

Answer 1

Start of with setting the css:

#myElement
{
    background-image: url('loading.gif');
}

Then use the following javascript function:

function loadImage()
{
    var img = new Image;
    img.src = "http://path/to/img";
    img.onload = function() 
    {
        var myElement = document.getElementById("myElement");
        myElement.style.backgroundImage = "url('" + this.src + "')";
    }
}

fire the function in the body onload like this:

<body onload="loadImage();">

or add it to another init script which fires from here.

Hope this will get you going!

Preload all CSS images while showing a preloader

Question

1 answers

solution1
1 ACCPTED 2014-08-25 21:47:07

Preload all CSS images while showing a preloader

Question

1 answers

solution1 1 ACCPTED 2014-08-25 21:47:07

solution1
1 ACCPTED 2014-08-25 21:47:07