Preserved Topic: Percentage Loader.. (Page 1 of 1)

I've been looking for a good Percentage Loader DHTML script for a new project. I've tested some scripts but it doesn't seem to satisfy me. So, I'm hoping that you guys can give me some links for this kindda script, or maybe you can give me one.

Thanks in advance..



R I . C . K

bratta
I hope this is what you are looking for...

mobrul

[thinking]...

That's quite ok, but I'm looking for a loader which shows the percenatge of the pages loaded .. like the flash percentage loader?

Any other links?

R I . C . K

Well, hmm. There's one way I can think to do this:


Make an array of objects. In each object, put an image object for an image that's on your page. Also put a variable in each object that has the *size* of that image. So you'd have something like this...

var numberOfImages = 3; // set appropriately.
var myImages = new Array();
for (a=0; a < numberOfImages; a++)
{
&nbsp;&nbsp;myImages[a] = new Object();
&nbsp;&nbsp;myImages[a].img = new Image();
}

// set the images up with their file sizes in Kb.
myImages[0].img.src = 'myimage.jpg';
myImages[0].filesize = 23;
myImages[1].img.src = 'myotherimage.gif';
myImages[1].filesize = 5;
myImages[2].img.src = 'thebackground.jpg';
myImages[2].filesize = 16;


You'll also need a variable containing the size of the HTML page itself:

var htmlfilesize = 3;

And you'll need a variable containing the total file size of everything, which can be calculated:

var allfilesize = htmlfilesize;
for (a=0; a < numberOfImages; a++)
&nbsp;&nbsp;allfilesize += myImages[a].filesize;
var loadedSoFar = htmlfilesize;

Then, you need to set every image so that when it's loaded, it will call some function which will update how much has loaded.

for (a=0; a < numberOfImages; a++)
&nbsp;&nbsp;myImages[a].img.onload = new Function('','ImageLoaded(' + a + ');');

That line was a little tricky - it actually dynamically creates a function which calls another function with an argument. Now we must define that other function:

ImageLoaded (imgNumber)
{
loadedSoFar += myImages[imgNumber].filesize;
var percentLoaded = Math.round(loadedSoFar/allfilesize*100);

// do something with the number!
alert(percentLoaded + '% of the page has loaded.');
}

I hope that helps you figure it out. I'm not sure if there's an easier way to get the image file sizes than specifying them yourself...

[This message has been edited by Slime (edited 08-08-2001).]

[copy] - [paste] - [try]

Thanks slime. I'll leave a credit on the script when I use it..

R I . C . K

Don't use it if you don't understand how it works. Ask questions if necessary. If you don't understand it, you won't be able to figure out the next thing, or maybe the thing after that. You get the idea. =)

I think I already grab the rough idea of this code, but I don't think that I can truly undersatnd its real functionality.. but, I'll try it first, and make my own mistake.. maybe I could leanr more by doing so...

R I . C . K