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

    How to minimize the no of css

    After adding a “current” class to an active item in a menu using jQuery, how can css changes be made to the container of the item?

    How to reuse CSS selector?

    How can I build a flexible ratings widget in LESS instead of straight CSS?

    How can I set my image's hover when hovering my text?

    How do I set the height of an iframe with the min-height property in the body?

    how to prevent shifting when changing border width

    How to make a key shape using css?

    How do you make this dogeared shape with css only

    How to use center-block and vertical align together using Bootstrap?

    How do you create and run an html page directly from LocalStorage?

    How to add new line in a Bootstrap button using CSS

    How to equally align two vertical columns created using a loop, an array, and appending childs in JavaScript (or CSS)?

    how to take common factors out from css where it is separated by comma (,) [duplicate]

    how to create a table layout with float in css

    site only shows half screen on mobile? Rest of screen is just body background?

    How to create table by using div

    How to divide 3 divs(CSS + MVC)

    How does this drop-down have the ^ shown?

    how to order CSS elements?

    How to pick with css multiple select tags that has at least one option selected?

    How to do page numbering in header/footer htmls with wkhtmltopdf?

    How to avoid this hardcoded index.js when use webpack?

    How to hold a css style on hover

    How to call css styles in specific page in HTML?

    how to give dynamic height in css

    How can I force each piece of a quadrant to inhabit only its fourth of the area (HTML/CSS)?

    Show icon on containing div hover

    How is does Jquery display a tooltip on this span element?

    How to display a div at the center of viewport?