Closed Thread Icon

Preserved Topic: Percentage Loader.. Pages that link to <a href="https://ozoneasylum.com/backlink?for=18122" title="Pages that link to Preserved Topic: Percentage Loader.." rel="nofollow" >Preserved Topic: Percentage Loader..\

 
Author Thread
Rick
Paranoid (IV) Inmate

From: Borneo Island
Insane since: Apr 2000

posted posted 08-07-2001 08:33



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

mobrul
Bipolar (III) Inmate

From:
Insane since: Aug 2000

posted posted 08-07-2001 14:44

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

mobrul

Rick
Paranoid (IV) Inmate

From: Borneo Island
Insane since: Apr 2000

posted posted 08-08-2001 12:31

[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

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted posted 08-08-2001 23:36

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).]

Rick
Paranoid (IV) Inmate

From: Borneo Island
Insane since: Apr 2000

posted posted 08-09-2001 07:16

[copy] - [paste] - [try]

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

R I . C . K

Slime
Lunatic (VI) Mad Scientist

From: Massachusetts, USA
Insane since: Mar 2000

posted posted 08-09-2001 14:23

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. =)

Rick
Paranoid (IV) Inmate

From: Borneo Island
Insane since: Apr 2000

posted posted 08-10-2001 09:34

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

« BackwardsOnwards »

Show Forum Drop Down Menu