kann erst ein Bild fertig laden, bevor das nächste geladen wird?
Paul Barckhausen
- grafik
Wenn auf einer Seite sich mehere Bilder befinden, stört es mich, daß mehere Bilder gleichzeitig geladen werden. Gibt es einen Befehl, der bewirkt, daß erst ein Bild fertig geladen wird, bevor mit dem Laden des nächsten Bildes begonnen wird?
Hallo Paul, <- Anreden sind hier SELFverständlich!
Wenn auf einer Seite sich mehere Bilder befinden, stört es mich,
daß mehere Bilder gleichzeitig geladen werden. Gibt es einen
Befehl, der bewirkt, daß erst ein Bild fertig geladen wird, bevor
mit dem Laden des nächsten Bildes begonnen wird?
Versuch es doch mal mit einem Preload; dann sollten, sofern der User
nichts anderes eingestellt hat, die Grafiken im Chace sein, wenn die
Seiten aufgerufen werden.
Bitte schau im Archiv nach; da steht einiges zu Image-Preload incl.
Links zu Beispielscripten.
Ach ja, und auch ein kleiner Gruss am Ende gehört hier zum guten Ton:
<img src="http://home.germany.net/100-80215/alex/images/promo/signet.gif" alt="">
<img src="http://home.germany.net/100-80215/alex/images/promo/akonline.gif" alt="">
Hallo Paul,
Wenn auf einer Seite sich mehere Bilder befinden, stört es mich,
daß mehere Bilder gleichzeitig geladen werden. Gibt es einen Befehl,
der bewirkt, daß erst ein Bild fertig geladen wird, bevor mit dem Laden
des nächsten Bildes begonnen wird?
Das stört mich auch manchmal, vor allem bei längeren Seiten mit vielen
Bildern, z.b. bebilderte Anleitungen oder die 15 Digicam-Bilder von der
letzten Party. Die mag man ja nicht jedesmal liebe/mühevoll in 15 einzelne
Seiten aufteilen, und wenn sie schön von oben nach unten laden ist das auch
gar nicht notwendig.
Nach dem Motto 'unser Netz soll schöner werden' gibts dafür jetzt das fertige
Script:
<html><head>
<noscript>
<!-- Ohne Javascript sieht man auf dieser Seite nix, deswegen
Weiterleitung auf eine Seite die die Bilder normal anzeigt.
Weiterleitung ist so wohl (unverständlicherweise) nicht W3C
konform, funktioniert aber.
-->
<meta http-equiv="refresh" content="0; URL=version_ohne_script.html">
</noscript>
<script>
/****************************
Liste der URL's zu den
Bildern, die einzeln
nacheinander (nach-)
geladen werden sollen.
*****************************/
urls=new Array(
"http://www.domain.de/pfad/zu/deinen/bildern/apfel.jpg", // ersetzt bild0
"http://www.domain.de/pfad/zu/deinen/bildern/birne.jpg", // ersetzt bild1
"http://www.domain.de/pfad/zu/deinen/bildern/banane.jpg",
"http://www.domain.de/pfad/zu/deinen/bildern/kiwi.jpg",
"http://www.domain.de/pfad/zu/deinen/bildern/pflaume.jpg",
"http://www.domain.de/pfad/zu/deinen/bildern/erdbeere.jpg",
"http://www.domain.de/pfad/zu/deinen/bildern/kirsche.jpg",
"http://www.domain.de/pfad/zu/deinen/bildern/johannisbeere.jpg",
"http://www.domain.de/pfad/zu/deinen/bildern/pfirsich.jpg",
"http://www.domain.de/pfad/zu/deinen/bildern/stachelbeere.jpg" // ersetzt bild9
);
bilder=new Array(urls.length); // hier kommen die nachzuladenden Bilder rein
nr=0; // Zähler, welches Bild grade geladen wird
/****************************
Neues Bild anlegen
und Bild laden
*****************************/
function neuBild()
{
bilder[nr]=new Image(); // Bildobjekt erzeugen und im bilder-Array speichern
bilder[nr].src=urls[nr]; // Laden des Bildes von angegebener Url anstossen.
}
/****************************
Prüfe ob Bild fertig,
dann Anzeigen und weiter
mit nächstem Bild
*****************************/
function checkLaden()
{
if(bilder[nr].complete==false) // Bild fertig geladen ?
return; // nein: nix tun
// sonst:
document.images["bild"+nr].src=bilder[nr].src; // fertig geladenes Bild anzeigen
nr++; // Bild-Zähler auf nächstes Bild
if(nr<urls.length) // sind noch urls abzuarbeiten ?
neuBild(); // dann nächstes Bild holen
else
clearInterval(timer); // sonst ENDE
}
/****************************
Bilder nacheinander laden
*****************************/
function laden()
{
neuBild(); // erstes Bild holen
timer = window.setInterval("checkLaden()",333); // regelmässig prüfen ob fertig, ggfls. mit nächstem Bild weiter
}
</script>
</head>
<body onLoad="laden();">
<!--
Alle Bilder die nacheinander nachgeladen werden sollen,
bekommen einen Bildnamen 'bildX', X ist dabei der Reihen-
folge nach zu vergeben, in der die Bilder geladen
werden sollen.
Es muss genausoviele bildX geben wie URLs im urls-Array.
Es kann beliebig viele andere Bilder geben, die ganz
normal geladen werden. (Ohne oder mit andererm Namen.)
Für alle bildX muss die richtige Grösse (die des
nachzuladenden Bildes) angegeben sein.
transparent.gif ist (z.B:) ein durchsichtiges Gif mit ca.
10x10 Pixeln und wird solange angezeigt, bis das richtige
Bild geladen wird.
-->
<img name="bild0" width=640 height=480 src="transparent.gif"><br>
<img name="bild1" width=640 height=480 src="transparent.gif"><br>
<img name="bild2" width=640 height=480 src="transparent.gif"><br>
<img name="bild3" width=640 height=480 src="transparent.gif"><br>
<img name="bild4" width=640 height=480 src="transparent.gif"><br>
<img name="bild5" width=640 height=480 src="transparent.gif"><br>
<img name="bild6" width=640 height=480 src="transparent.gif"><br>
<img name="bild7" width=640 height=480 src="transparent.gif"><br>
<img name="bild8" width=640 height=480 src="transparent.gif"><br>
<img name="bild9" width=640 height=480 src="transparent.gif"><br>
</body>
</html>
Gruss,
Carsten