[thelist] Help on Preload Bar

VOLKAN ÖZÇELİK volkan.ozcelik at gmail.com
Tue Mar 29 13:12:08 CST 2005


Rui,

afaik you can only write preload script for image files in js.
I've not examined the code you posted
But in general, the progress script written for image files do not
show pure progress but only a percentile showing

(number of preloaded images)/(total number of images in queue)

<off-discussion>
However, in theory, again for images, it is possible to write a
proactive estimator which stores the begin time and and time of
preload of each file and do some statistics suchs as moving average,
which will give the estimated download time. (It'll be fun to
implement one and I plan to do it when I have time. I don't know may
be somebody has already done it beforehand :) )
</off-discussion>

I pondered on a java or activex based solution, but I think there is
no way around.

The only reasonable alternative for non-image files is, imho, to display a
"please wait..." animated gif. 

HTH,
Volkan.


On Tue, 29 Mar 2005 06:20:23 -0300 (ART), Rui Madeira
<ruimbmadeira at yahoo.com.br> wrote:
> Hello everyone
> 
> I need some help to find a scrip of a preload bar. The preload bar will serve to preload a .mwf file. It´s a file from the MapGuide software.
> 
> I´ve already have a script but it doesn´t seem to work with files that are not image files... What must i do in the script so that it may be possible to load other files than images files?
> 
> Thank you in advaced
> 
> Rui Madeira
> 
> <html>
> <head>
> <script language=3D"JavaScript1.2">
> <!-- begin hiding
> // (C) 2000 Marcin P Wojtowicz [one_spook at hotmail.com]. All rights =
> reserved.
> // Obtain permission before selling/redistributing in any medium.
> startingColor =3D new Array() // <-- Do not modify!
> endingColor =3D new Array() // <-- Do not modify!
> // YOU MAY MODIFY THE FOLLOWING:
> var yourImages =3D new =
> Array("http://images.amazon.com/images/P/1565924940.01.TZZZZZZZ.jpg","htt=
> p://images.amazon.com/images/P/0201353415.01.TZZZZZZZ.jpg","http://images=
> .amazon.com/images/P/1556225865.01.TZZZZZZZ.jpg","http://images.amazon.co=
> m/images/P/1893115054.01.TZZZZZZZ.jpg","http://images.amazon.com/images/P=
> /1861001746.01.TZZZZZZZ.jpg") // Fill this array with the images you =
> wish to preload
> var locationAfterPreload =3D =
> "http://www.javascriptkit.com/script/script2/preloadimage2.shtml" // The =
> script will redirect here when the preloading finishes *successfully*
> var preloadbarWidth =3D 250 // The length of the preload bar. Should be =
> greater than total amount of images you want to preload!
> var preloadbarHeight =3D 15 // The height of the gradient/preload bar
> var backgroundOfGradient =3D "#000000" // Default color while the =
> preload bar is "filling up"
> // Color the preloadbar is starting with - enter 1st, 3rd and 5th =
> numbers/letters of color code
> startingColor[0] =3D "c"=20
> startingColor[1] =3D "f"
> startingColor[2] =3D "f"
> // Color the preloadbar is going to end up with - enter the 1st, 3rd and =
> 5th numbers/letters of color code
> endingColor[0] =3D "c"
> endingColor[1] =3D "0"
> endingColor[2] =3D "0"
> // FOR TROUBLESHOOTING:
> var gap =3D 5 // PLAY AROUND WITH THIS SETTING IF YOU GET A JAVASCRIPT =
> ERROR!!! 2 is the minumum value!!!
> 
> // DO NOT MODIFY ANYTHING BEYOND THIS POINT!!!
> if (!document.all) location.replace(locationAfterPreload)
> var a =3D 10, b =3D 11, c =3D 12, d =3D 13, e =3D 14, f=3D15, i, j, ones =
> =3D new Array(), sixteens =3D new Array(), diff =3D new Array();
> var convert =3D new =
> Array("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"), =
> imgLen =3D yourImages.length;
> var loaded =3D new Array(), preImages =3D new Array(), currCount =3D 0, =
> pending =3D 0, h =3D 0, hilite =3D new Array(), cover =3D new Array();
> var num =3D Math.floor(preloadbarWidth/gap);
> for (i =3D 0; i < 3; i++) {
> startingColor[i] =3D startingColor[i].toLowerCase();
> endingColor[i] =3D endingColor[i].toLowerCase();
> startingColor[i] =3D eval(startingColor[i]);
> endingColor[i] =3D eval(endingColor[i]);
> diff[i] =3D (endingColor[i]-startingColor[i])/num;
> ones[i] =3D Math.floor(diff[i]);
> sixteens[i] =3D Math.round((diff[i] - ones[i])*15);
> }
> endingColor[0] =3D 0;
> endingColor[1] =3D 0;
> endingColor[2] =3D 0;
> i =3D 0, j =3D 0;
> while (i <=3D num) {
> hilite[i] =3D "#";
> while (j < 3) {
>  hilite[i] +=3D convert[startingColor[j]];
>  hilite[i] +=3D convert[endingColor[j]];
>  startingColor[j] +=3D ones[j];
>  endingColor[j] +=3D sixteens[j];
>  if (endingColor[j] > 15) {
>   endingColor[j] -=3D 15;
>   startingColor[j]++;
>  }
>  j++;
> }
> j =3D 0;
> i++;
> }
> function loadImages() {
> for (i =3D 0; i < imgLen; i++) {
>  preImages[i] =3D new Image();
>  preImages[i].src =3D yourImages[i];
>  loaded[i] =3D 0;
>  cover[i] =3D Math.floor(num/imgLen)*(i+1)
> }
> cover[cover.length-1] +=3D num%imgLen
> checkLoad();
> }
> function checkLoad() {
> if (pending) { changeto(); return }
> if (currCount =3D=3D imgLen) { location.replace(locationAfterPreload); =
> return }
> for (i =3D 0; i < imgLen; i++) {
>  if (!loaded[i] && preImages[i].complete) {
>   loaded[i] =3D 1; pending++; currCount++;
>   checkLoad();
>   return;
>  }
> }
> setTimeout("checkLoad()",10);
> }
> function changeto() {
> if (h+1 > cover[currCount-1]) {
>  var percent =3D Math.round(100/imgLen)*currCount;
>  if (percent > 100) while (percent !=3D 100) percent--;
>  if (currCount =3D=3D imgLen && percent < 100) percent =3D 100;
>  defaultStatus =3D "Loaded " + currCount + " out of " + imgLen + " =
> images [" + percent + "%].";
>  pending--;
>  checkLoad();
>  return;
> }
> eval("document.all.cell" + (h+1) + ".style.backgroundColor =3D =
> hilite[h]");;
> h++;
> setTimeout("changeto()",1);
> }
> defaultStatus =3D "Loaded 0 out of " + imgLen + " images [0%]."
> // end hiding -->
> </script>
> </head>
> <body>
> <center>
> <font face=3D"Verdana, Arial, Helvetica" size=3D"2"><center>Preloading =
> Images... Please Wait..</center>
> <script language=3D"JavaScript1.2">
> <!-- beging hiding
> document.write('<table border=3D"0" cellpadding=3D"0" cellspacing=3D"0" =
> width=3D"' + preloadbarWidth + '"><tr height=3D"' + preloadbarHeight + =
> '" bgcolor=3D"' + backgroundOfGradient + '">');
> for (i =3D 0; i < num; i++) {
> document.write('<td width=3D"' + gap + '" id=3D"cell' + (i+1) + =
> '"></td>');
> }
> document.write('</tr></table>');
> document.write('<p><small><a =
> href=3D"javascript:location.replace(locationAfterPreload)">Skip =
> Preloading</a> &nbsp;| &nbsp;<a =
> href=3D"Scri'>http://javascriptkit.com/script/script2/preloadimage2.shtml">Scri=
> pt Credits</a></small></p></font>')
> loadImages();
> // end hiding -->
> </script>
> </font></center>
> </body>
> </html>
> 
> ---------------------------------
> Yahoo! Acesso Grátis: Internet rápida e grátis. Instale o discador agora!
> --
> 
> * * Please support the community that supports you.  * *
> http://evolt.org/help_support_evolt/
> 
> For unsubscribe and other options, including the Tip Harvester
> and archives of thelist go to: http://lists.evolt.org
> Workers of the Web, evolt !
>


More information about the thelist mailing list