[html/js] runtime preloading...

[Verwijderd]

Ik probeer een runtime preloader te maken.

Dat houd nu in dat je een linkje klikt, dat linkje veranderd in 'loading...' en dan twee thumbnail plaatjes inlaad, een normale en een voor de mouseover. Als dat laden gedaan is, moet het 'loading...' veranderen in de image. (met een javascriptje voor de mouseover-pict).

ik doe het nu zo:

code:

1:  id_van_div.innerHTML = "<b>loading...</b>";

2:  img_up   = new Image; img_down.src = "./up.jpg";
3:  img_down = new Image; img_down.src = "./down.jpg";

4:  id_van_div.innerHTML = "<img src=" + img_down.src + \
    "onmouseover='javascript::funcMOver();' \
    onmouseover='javascript::funcMOut();'>";

Nu is het zo dat deze vorm van preloading NIET werkt, omdat de regel 4 meteen al word uitgevoerd op het moment dat de regel 2/3 geinterpeteerd zijn. En niet op het moment dat de Image objecten van regel 2/3 klaar zijn met laden.

Is het mogelijk om een statement tussen regel 3 en 4 te zetten die wacht tot ze klaar zijn oid.

[Verwijderd]

Het image object heeft een onload method, en een complete property.

Kijk hier eens naar: http://developer.netscape.com/docs/manuals/js/client/jsref/handlers.htm#1120545

Je kunt natuurlijk bij iedere onload event even kijken of alle plaatjes al geladen zijn, zo ja, dan de layer zichtbaar maken of iets dergelijks. Ik zou het plaatje niet met innerHTML in die layr zetten.

[Verwijderd]

dus dan word het zo iets?????

code:

1:   id_van_div.innerHTML = "<b>loading...</b>";
2:   img_up   = new Image; img_down.src = "./up.jpg"; 
     img_down.onload = "funcLoaded(1)";
3:   img_down = new Image; img_down.src = "./down.jpg";
     img_down.onload = "funcLoaded(2)";

function funcLoaded(item)
{
...
  if (both_loaded)
    id_van_div.innerHTML = "<img src=" + img_down.src + \
     "onmouseover='funcMOver();' \
     onmouseover='funcMOut();'>";
...
}

zou dat werken (ik kan het nu niet testen)

[crisp]

Het antwoord: uitlezen dan de readyState property; die is namelijk 'loading' of 3 zolang het plaatje nog niet geladen is, en 'complete' of 4 als het plaatje compleet binnen is:

code:

1) id_van_div.innerHTML = "<b>loading...</b>";
2) img_down = new Image; img_down.src = "./down.jpg";
3) If (img_down.readyState != 'complete' && img_down.readyState != 4) GoTo 3)
4) Laat_plaatje_zien();

Erg pseudo, maar zou moeten werken...

[Verwijderd]

pseudo is goed en duidelijk !!
tanx