Search code examples
cssimagexhtml

Wait for Image to be Loaded Before Being Displayed

Is there a simple HTML/XHTML/CSS code for displaying an image after it is done fully loading?

The reason being that I have a rather large background image and header image (bytes-wise) and I want to wait for the image to be fully loaded before it is displayed in the browser.

I believe watching the image load bit-by-bit is a bit unattractive.

Solution

  • Start with visibility:hidden and change it to visibility:visible on the image's onload event handler.

    edit: example

    In your HTML, have:

    <img onload="imgLoad(this)" style="visibility:hidden" ... />

    In your script, have:

    function imgLoad(img) {
    img.style.visibility='visible';
}