Q1002 Can I highlight the percentage download of several large images on the screen whilst they are downloading from the server?

You are here: irt.org | FAQ | DHTML | Q1002 [ previous next ]

With browsers that support the Image object you can use the images onLoad event handler to update either a form field, or using DHTML a "layer":

<SCRIPT LANGUAGE="JavaScript"><!--
var percentage = 0;
var loaded = false;

function update(what) {
    if (document.all)
        document.all.myDiv.innerHTML = what;
    else if (document.layers) {
        document.layers['myLayer'].document.open();
        document.layers['myLayer'].document.write(what);
        document.layers['myLayer'].document.close();
    }
    else if (document.images)
        document.myForm.myField.value = percentage + '%';
}

function percent(amount) {
    percentage += amount;
    update(percentage);
}
//--></SCRIPT>

<IMG SRC="image1.gif" WIDTH="1" HEIGHT="1" onLoad="percent(10)">
<IMG SRC="image2.gif" WIDTH="1" HEIGHT="1" onLoad="percent(50)">
<IMG SRC="image3.gif" WIDTH="1" HEIGHT="1" onLoad="percent(30)">
<IMG SRC="image4.gif" WIDTH="1" HEIGHT="1" onLoad="percent(5)">
<IMG SRC="image5.gif" WIDTH="1" HEIGHT="1" onLoad="percent(5)">

<DIV ID="myDiv"><LAYER ID="myLayer"></LAYER></DIV>

<SCRIPT LANGUAGE="JavaScript"><!--
if (!(document.all || document.layers) && document.images) {
    document.write('<FORM NAME="myForm"><INPUT TYPE="TEXT NAME="myField"></FORM>');
}
//--></SCRIPT>