Q1280 How can I display a "please wait" message whilst loading multiple images in the background, and then when they have all, loaded display them all at once?

irt.org | Knowledge Base | JavaScript | Image | Q1280 [ previous next ]

Q1280 How can I display a "please wait" message whilst loading multiple images in the background, and then when they have all, loaded display them all at once?

Try the followng which is based on the article Displaying Temporary Pages:

<head>
<script language="JavaScript"><!--
image_1 = image_2 = image_3 = image_4 = false;

function checkImage(whichimage) {
    switch (whichimage) {
        case 1: image_1 = true; break;
        case 2: image_2 = true; break;
        case 3: image_3 = true; break;
        case 4: image_4 = true; break;
    }
    if (image_1 && image_2 && image_3 && image_4) showImage();
}

function showImage() {
    if (document.all) {
        document.all.wait.style.visibility="hidden";
        document.all.mypage.style.visibility="visible";
    }
    else {
        if (document.layers) {
            document.layers["wait"].visibility="hidden";
            document.layers["mypage"].visibility="visible";
        }
    }
}
//--></script>
</head>

<body>

<div id="wait" style="position: absolute; top: 200; left: 200; visibility: visible; font-size: 28pt; color: red;">
<script language="JavaScript"><!--
if (document.all || document.layers) document.write("Loading... Please Wait");
//--></script>
</div>

<div id="mypage" style="position: absolute; visibility: hidden;">
<img src="horse1.gif" onLoad="window.checkImage(1)">
<img src="sunset1.gif" onLoad="window.checkImage(2)">
<img src="riders1.jpg" onLoad="window.checkImage(3)">
<img src="sue.jpg" onLoad="window.checkImage(4)">
</div>

What's New

How to do the impossible with Google Gears

Out and About

Last Updated: 30th March 2008. Maintained by: Martin Webb and Michel Plungjan
irt.org liability, trademark, document use, privacy statement and software licensing rules apply.