CODEWITHSUNDEEP
javascriptjquerycssimagebackground-image
aborted
aborted

Reputation: 4541

Preload all CSS images while showing a preloader

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

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

P.S: I also seeking links to plugins if there are any available.

Upvotes: 0

Views: 70

Answers (1)

Arnold de Roij
Arnold de Roij

Reputation: 104

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!

Upvotes: 1

Related Questions