Nightfire Java Archiv - JavaScript - Tutorials

[]

Eine Frage, die uns öfters erreicht, ist die, wie man den Browser dazu bewegt, Bilder in einer bestimmten Reihenfolge zu laden, bzw. anzuzeigen. Das Problem ist, dass, auch wenn Sie Bilder in einer bestimmten Reihenfolge in Ihren HTML- Code platzieren, diese nicht zwingend in dieser Reihenfolge geladen, bzw. angezeigt werden. Die Ursache dafür ist die Arbeitsweise des Cache- Systems Ihres Browsers.

Browser besitzen die Möglichkeit, mehrere Bilder gleichzeitig zu laden. Nehmen wir einmal an, wir haben folgende vier Bilder in unser Dokument eingebunden:

Grafik1.jpg = 40k
Grafik2.jpg = 5k
Grafik3.jpg = 15k
blank.gif = 1k

Der Quellcode sieht etwa folgendermassen aus:

<html>
<head>
<title>Ein Titel</title>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<img src="Grafik1.jpg" width="255" height="279">
<img src="Grafik2.jpg" width="255" height="279">
<img src="Grafik3.jpg" width="255" height="279">
<img src="blank.gif" width="255" height="279">
</body>
</html>

Die meisten würden jetzt annehmen, dass Grafik1.jpg als erstes Bild geladen wird, weil es das erste Element ist, welches nach dem Bodytag platziert wurde. Unglücklicherweise trifft dies nicht zu, da das Cachesystem Ihres Browsers andere Wege geht. Möglicherweise wird blank.gif als erstes geladen, weil es die kleinste Dateigrösse besitzt, Grafik2.jpg könnte als nächstes kommen oder aber auch Grafik3.jpg oder vielleicht Grafik1.jpg, es hängt ganz davon ab, wie schnell der Browser die Dateien einliest. Als Konsequenz ergibt sich eine zufällige Reihenfolge der Anzeige der Bilder.

Glücklicherweise können wir einen kleinen Trick anwenden, um die Reihenfolge der Anzeige zu bestimmen.

Der erste Teil dieses Tricks ist die Anwendung mehrerer blank.gif an den Stellen im Body des Dokuments, an denen später die Originalbilder angezeigt werden sollen. Das hat mehrere Vorteile, denn das blank.gif ist ein transparentes GIF in der Grösse 1x1 Pixel, welches eine sehr kleine Dateigrösse aufweist, nur einmal geladen werden muss und als Platzhalter für die Originale fungiert, dadurch wird die Struktur der Seite viel schneller geladen.

Ein paar Dinge sind an dieser Stelle wichtig, jedes blank.gif muss eine(n) eindeutige(n) Namen oder ID besitzen und die Dimensionen jedes blank.gif müssen denen der Originalbilder entsprechen. Also sieht unser Dokument jetzt so aus:

<html>
<head>
<title>Ein Titel</title>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<img src="blank.gif" width="55" height="279" name="img1">
<img src="blank.gif" width="255" height="27" name="img2">
<img src="blank.gif" width="25" height="279" name="img3">
<img src="blank.gif" width="255" height="79" name="img4">
</body>
</html>

Als nächstes erzeugen wir ein sogenanntes Image Swapping, das auch bei Rollover- Effekten zum Zuge kommt. Welchen Rollover- Effekt man einsetzt, ist irrelevant, wichtig ist, dass die Bilder vorgeladen werden, so dass wir später die blank.gifs gezielt austauschen können. Hier ein kleines Beispiel:

if (document.images) {
img1on = new Image();
img1on.src = "Grafik1.jpg";
img2on = new Image();
img2on.src = "Grafik2.jpg";
img3on = new Image();
img3on.src = "Grafik3.jpg";
img4on = new Image();
img4on.src = "Grafik4.jpg";

}

function imgOn(imgName) {
if (document.images) {
document[imgName].src = eval(imgName + "on.src");
}
}

// -->
</script>

Nachdem wir nun die Originalbilder vorgeladen haben, gehen wir dazu über, sie in der von uns gewünschten Reihenfolge anzuzeigen. Hierzu verwenden wir eine Reihe Timeouts:

function start() {
setTimeout("imgOn('img1')",1000);
setTimeout("imgOn('img2')",2000);
setTimeout("imgOn('img3')",3000);
setTimeout("imgOn('img4')",4000);
}

Was nun noch fehlt, ist die Funktion über einen onLoad- Eventhandler im Bodytag zu starten:

Und hier ist das komplette Script:

<html>
<head>
<title>Sequential Image Loading</title>

}

function imgOn(imgName) {
if (document.images) {
document[imgName].src = eval(imgName + "on.src");
}
}

function start() {
setTimeout("imgOn('img1')",1000);
setTimeout("imgOn('img2')",2000);
setTimeout("imgOn('img3')",3000);
setTimeout("imgOn('img4')",4000);
}
// -->
</script>

</head>

</body>
</html>

Tutorial No: 001