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?

You are here: irt.org | FAQ | JavaScript | Image | Q1280 [ previous next ]

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>