Hide Content Loading Gif

Question

I have two large image files in a div on a page that take several seconds to load. How can I hide the loading content while a "loading gif" appears and then have the content appear once it has fully loaded?

I don't really know anything about javascript but I tried using this code. It did half of what I wanted it to do. The "loading gif" worked but the problem was that the content was visible as it was loading.

http://aaron-graham.com/test2.html

<div id="loading" style="position:absolute; width:95%; text-align:center; top:300px;">
        <img src="img/parallax/ajax-loader.gif" border=0>
</div>
    <script>
        var ld=(document.all);
        var ns4=document.layers;
        var ns6=document.getElementById&&!document.all;
        var ie4=document.all;
        if (ns4)
        ld=document.loading;
        else if (ns6)
        ld=document.getElementById("loading").style;
        else if (ie4)
        ld=document.all.loading.style;
        function init()
        {
        if(ns4){ld.visibility="hidden";}
        else if (ns6||ie4) ld.display="none";
        }
    </script>

Any help would be greatly appreciated!

Answer 1

Use jquery, with code like:

$(document).ready(function(){
    $('#pic1').attr('src','http://nyquil.org/uploads/IndianHeadTestPattern16x9.png');
});

With the html like:

<img id="pic1" />

It works by running when document's ready function is called (which is called after the DOM and other resources have been constructed), then it will assign the img's src attribute with the image's url you want.
Change the nyquil.org url to the image you want, and add as many as needed (just don't go overboard ;). Tested Firefox 3/chrome 10.

Here is the demo: http://jsfiddle.net/mazzzzz/Rs8Y9/1/

Answer 2

Working off your HTML structure I added a notifyLoaded class for the two images so you can watch for when both have loaded via an onload event. Since css background images don't get that event I've created a hidden img using the background's path so we can test when that image is loaded

HTML:

<div id="loading"> 
        <img src="http://aaron-graham.com/img/parallax/ajax-loader.gif" border="0" /> 
    </div> 

    <div id="vertical"> 
        <div> 
            <div class="panel"> 
                <img class="notifyLoaded" src="http://aaron-graham.com/img/parallax/tile3.png" /> 
            </div> 
        </div> 
    </div>

    <div id="imgLoader">
        <img class="notifyLoaded" src="http://aaron-graham.com/img/parallax/deepspace3.jpg" alt="" />
    </div>

You have reference to jQuery in your page already so I've replaced your script to the following.

jQuery:

$(document).ready(function() {
    var $vertical = $('#vertical');
    var $imgs = $('.notifyLoaded');
    var imgCount = $imgs.length;
    var imgLoadedCount = 0;

    $vertical.backgroundparallax(); // Activate BG Parallax plugin

    $imgs.load(function() {
        console.log(this);
        imgLoadedCount++;
        if (imgCount == imgLoadedCount) {
            // images are loaded and ready to display
            $vertical.show();
            // hide loading animation
            $('#loading').hide();
        }
    });
});

I've also set #Vertical to a default display:none; which gets changed when images have loaded

CSS:

body {background-color:black;}
#loading {position:absolute;width:95%;text-align:center;top:300px;}
#vertical {display:none;background-image: url('http://aaron-graham.com/img/parallax/deepspace3.jpg');background-position: 0 0;height: 650px;width: 900px;overflow: auto;margin:35px auto auto auto;}
#vertical > div {margin: 0;color: White;}
#vertical .panel {padding: 100px 5%;margin-left:40px;height: 3363px;}
#imgLoader {display:none;}