Preload all CSS images while showing a preloader


Tags: javascript,jquery,css,image,background-image

Problem :

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.

Any help would be highly appreciated.

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



Solution :

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!


    CSS Howto..

    CSS how to select first occuring element after another element

    How do I add the date a blog post was created in place of a bullet point under list-style-type?

    How to change the css of the div that i just created in code

    How to make heading appear in different colors

    How can I apply a custom css rule to small helping arrows that appears on column reordering in Kendo UI grid

    How To Remove Wordpress Title From One Page?

    How to remove captcha image and it's textbox using css?

    How to set two divs side by side

    How to draw diagonal lines with css [duplicate]

    How to make gridview and cells bigger?

    How to use css with UIWebView?

    How to render my dialog on top?

    HOW TO check if an external (cross-domain) CSS file is loaded using Javascript

    How to make 2 backgrounds “stick” to the sides of a centered div

    How to make a div appear when hyperlink is clicked once and disappear when hyperlink is clicked a second time? Can this be repeated?

    CSS - How to prevent ul/ol li's second row of text from going further left than the first line?

    How do I style a circular vertically-loading progress bar?

    How to get these timestamps, which come after in the html, to float right on the same line

    How to make a full width image responsive

    How can I improve this markup and CSS to keep things simple and easy to work with?

    CSS: can't understand how to work with the z-index

    How to add a class if div height reaches a fixed height?

    How to inherit the background color of textarea from parent element in Internet Explorer?

    How to align text in CSS

    How to reset tag in CSS

    How to Make Radio Button Into CSS Button?

    How can I make my webpage background cover fixed for the full size page in css?

    How to set background color in AppGyver Supersonic?

    How combine multiple media destinations (screen, print) with width restriction?

    How to give shadow to a border