Home Articles FAQs XREF Games Software Instant Books About Feedback Search Site-Map
irt.org logo

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

irt.org | Knowledge Base | DHTML | Q1002 [ previous next ]

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

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>

Provide feedback ...
AddThis Social Bookmark Button

Provide feedback ... AddThis Social Bookmark Button


Last Updated: 30th March 2008. Maintained by: Martin Webb
irt.org liability, trademark, document use, privacy statement and software licensing rules apply.
Copyright © 1996-2008 irt.org, All Rights Reserved.