 Imgages vorladen
Manchmal möchten sie Grafiken für die nächste Seite bereits vorladen (Laden der Grafik in den Browserspeicher), damit die Folgeseite zügiger angezeigt wird?
Für eine MouseOver-Funktionen sollte das MouseOver-Bild schon bereitgestellt werden, bevor der Mauszeiger den Effekt einleitet. So kann man eine verzögerte Anzeige umgehen. Schließlich würde sonst erst beim Auslösen der MouseOver-Funktion die Anfrage für das zu tauschende Bild zum Server geschickt.
Demo mit und ohne Vorladen
Hier können sie testen wie es in der Praxis aussieht, wenn ein Mouseover-Bild bereits vorgeladen wurde oder welche Verzögerung festzustellen ist, wenn das Bild erst vom Server angefordert wird, sobald der MouseOver-Effekt initialisiert wird.
a) Beispiel mit Vorladen:
Die 'Tauschgrafik' sollte ohne Verzögerung angezeigt werden.
b) Beispiel ohne Vorladen:
Beim ersten MouseOver wird hier das zu tauschende Grafik erst einmal vom Server angefordert. Abhängig von der Verbindungsgeschwindigkeit, kann man eine Verzögerung beobachten.
Beim zweiten MouseOver befindet sich die 'Tauschgrafik' idR bereits im Browser-Cach und wird ohne Wartezeit angezeigt.
Möglichkeiten des Vorladens (die Engländer sagen: "preload" [pri-lood])
- mit HTML-Anweisungen
- mit CSS-Notierungen
- mit JavaScript
1) Möglichkeit mit HTML
Hier wird ein einfacher Trick angewand. Neben der normalen Grafik wird auch die Grafik für die MouseOver-Aktion bereits in die Seite eingebunden. Natürlich möchte man die nicht wirklich anzeigen. Deshalb soll die Grafik nur winzig klein dargestellt werden und das natürlich an einer Stelle, die nicht so offensichtlich ist.
Notiert man die 'Tauschgrafik' innerhalb der HTML-Seite mit üblichen <img>-Tags, befindet sich die Grafik nach dem Laden der Seite ebenfalls im Browsercach. Weil die Grafiken normalerweise aber nicht sichtbar angezeigt werden sollen, bedient man sich eines simplen Kniffs:
Die Imges mit HTML-Anweisungen einfach am Ende der Seite einfügen, allerdings mit (gelogenen) Höhen- und Breitenangaben, dann sind sie beinahe unsichtbar.
<img src="bild.jpg" width="1" height="1" border="0" alt="">
Ich empfehle das außerhalb jeder Tabelle zu tun! Netscape 4.x zeigt eine Tabelle erst nach vollständigem Laden des Inhalts an. Das würde sonst bedeuten, dass die Seite entsprechnd verzögert dargestellt.
Daher sind die HTML-Notierungen für diese Images am Besten am Ende der Seite, gleich vor dem Ende-Body-Tag ( </body> ) gut aufgehoben.
Tipp:
Falls sie eine Startseite verwenden und die auf der nächsten Seite benötigten Images (für den Besucher unbemerkt) auf dieser Seite im Hintergrund bereits vorladen, stehen die Grafiken auf der nächsten Seite sofort zur Verfügung. Natürlich macht das nur Sinn, wenn die Verweildauer auf der vorgeschalteten Seite voraussichtlich entsprechend lang sein wird.
2) Möglichkeit mit CSS
Bilder laden aber 'verstecken' ist der Trick, den man mit CSS umsetzen kann. Dabei werden die Grafiken nicht wie im HTML-Verfahren lediglich verkleinert angezeigt, sondern überhaupt nicht.
Die Variante mit CSS funktioniert ähnlich wie die HTML-Variante. Die benötigten Bilder werden mit <img>-Tags in die Seite eingebunden. Allerdings wird der Bereich mit den Grafiken nicht angezeigt. Dazu wird dieser Bereich mittels CSS-Anweisungen auf 'unsichtbar' oder 'nicht anzeigen' eingestellet (display:none od. visibility:hidden).
Dazu notiert man eine eigene CSS-Klasse für 'unsichtbare' Elemente (3 Varianten)
<style type="text/css">
<!--
.hidepics {
width:0px;
height:0px;
visibility:hidden;
}
-->
</style>
<style type="text/css">
<!--
.hidepics {
width:0px;
height:0px;
display:none;
}
-->
</style>
... und bindet diese Klasse in das IMG-Tag ein:
<img class="hidepics" src="bildname.jpg" ... >
Möglich wäre auch eine Inline-Anweisung ...
<img style="width:0px; height:0px; visibility:hidden;" src="bild01.jpg" ... >
(mit Platzhalter)
<img style="width:0px; height:0px; display:none;" src="bild01.jpg" ... >
(ohne Platzhalter)
3) Möglichkeit mit JavaScript
Mit JavaScript (die übliche Methode) werden die Grafiken durch JavaScript-Anweisungen dem Browser als Elemente / Bestandteil der Seite bekannt gemacht. Dabei werden die Grafiken bereits in den internen Speicher des Browsers geladen aber noch nicht angezeigt.
a) Einzelnotierung
Sie könnten alle vorzuladenden Grafiken einzeln und nacheinander in einem JavaScript-Block notieren:
<script type="text/javascript" language="JavaScript">
<!--
Bild01 = new Image();
Bild01.src = "../images/img01.jpg";
Bild02 = new Image();
Bild02.src = "../images/img02.jpg";
...
//-->
</script>
Das ist bei wenigen Grafiken noch OK. Wird die Liste länger solte man das vereinfachen / automatisieren.
b) Automatisierung
Erklärung in einzelnen Schritten:
Dazu wird ein Register (Array) verwendet, dass sie manuell erstellen und die URIs der Grafiken enthält. Dann soll eine Funktion die wiederkehrenden Arbeitsschritte übernehmen.
Bei der Übername der Grafiken aus dem Array durch die Funktion wird dafür gesorgt, das jede neu aufgenommene Grafik dem Browser als ein neues Bild-Objekt bekannt gemacht wird.
Die einfachste Form der automatisierten JavaScript-Anweisungen sieht dazu 3 Schritte vor:
- die Grafikreferenz (URI) für jede Grafik wird dem Register (Array) entnommen
- für jedes Element des Registers wir ein Image-Objekt geschaffen
- jedem Image-Objekt wird die Grafikreferenz (URI) zugeordnet
Diese Schritte werden innerhalb einer Schleife abgearbeitet.
Die JavaScript-Anweisungen in Worten
Sie definieren ein neues Register und die Inhalte:
die Grafikreferenz (URI) für die Grafik 01 ist "../images/img01.jpg"
die Grafikreferenz (URI) für die Grafik 02 ist "../images/img02.jpg"
die Grafikreferenz (URI) für die Grafik 03 ist "../images/img03.jpg"
die Grafikreferenz (URI) für die Grafik 04 ist "../images/img04.jpg"
wiederhole die nächsten Schritte für jede Grafik im Register
{
gehe zum ersten / nächsten Element des Registers
die Variable Bild ist ein neues Image-Objekt
die Grafikreferenz (URI) für dieses Objekt ist das, was in dieser Registerzelle steht
}
Danach sind dem Browser alle eingelesenen Grafiken als zugehörige Elemente des Arrays bekannt und stehen zur Verfügung.
Der JavaScript-Code
var BildArray = new Array();
BildArray[0] = "../images/img01.jpg";
BildArray[1] = "../images/img02.jpg";
BildArray[2] = "../images/img03.jpg";
BildArray[3] = "../images/img04.jpg";
// alternative Schreibweise:
// BildArray = new Array("../images/img01.jpg", ... "../images/img04.jpg");
function Vorladen02()
{
for (i=0; i < BildArray.length; i++) {
var Bild = new Image();
Bild.src = BildArray[i];
}
}
Die Abarbeitung des zu wiederholenden Vorgangs ist in eine Schleife eingebunden die so lange durchlaufen wird, bis jede Grafik aus dem Register (BildArray) eingelesen wurde. Dieser Block des JavaScript-Codes ist in die Funktion 'Vorladen02()' eingebettet und kann gestartet werden, indem man diese Funktion zum Vorladen der Bilder aufruft.
Das werden sie normalerweise gleich beim Laden der Seite einleiten mit:
<body onLoad="Vorladen02()" ... >
Danach stehen die Informationen über die Grafiken im browserinternen 'Gedächtnis' (dem browserinternen Speicher) zum Abruf bereit.
Das wars, jetzt folgen lediglich weiterführende Gedanken
Überprüfen
Das könnte man nun überprüfen, wenn man die browserinternen Informationen abrufen würde. Neben den Grafiken die ohnehin in die HTML-Seite eingebunden sind und überprüfen könnte mit ...
<script type="text/javascript" language="JavaScript">
<!--
document.write("Die Seite enthält " + document.images.length + " Grafiken");
//-->
</script>
... könnte man auch den Inhalt des Arrays 'BildArray' anzeigen lassen mit
<script type="text/javascript" language="JavaScript">
<!--
document.write("BildArray enthält " + BildArray.length + " Informationen");
var Liste = "| ";
for (var i = 0; i < BildArray.length; ++i) {
var Liste = Liste + BildArray[i] + " | ";
}
document.write(Liste);
//-->
</script>
Für diese Seite würde die Information so dargestellt:
Soweit meine Überlegungen zu Erweiterungen des JavaScripts. Dieses Basisscript könnte man also noch ein wenig ausbauen. Bisher hatte ich das lediglich zur Kontrolle des Ladevorgangs beim Testen eingesetzt. Wenn meine Zeit es zulässt, wird es dazu eigenständige Beispielseiten geben:
- Anzeige des abgeschlossenen Ladevorgangs
- Optionales Vorladen (Benutzerbestimmt)
- Einblenden der eigentlichen Seite erst nach Ende des Ladevorgangs
Die entsprechenden Anzeigen
Der tatsächliche Ladezustand soll anzeigt werden. Dazu würde ich ein 16 x 16 Pixel großes Image auf der Seite anzeigen. Abhängig vom Ladezustand würde man dann eines der 3 Mini-Images sehen:
| Ladevorgang noch nicht gestartet: |  | loading-indicator00.gif |
| Ladevorgang wurde gestartet: |  | loading-indicator01.gif |
| Ladevorgang ist abgeschlossen: |  | loading-indicator02.gif |
Das Image wird notiert und erhält das Attribut id="Status"
<img id="Status" width="16" height="16" src= ... >
Das Image würde dann durch eine JavaScript-Funktion ausgetauscht durch die Anweisung
document.getElementById("Status").src = "loading-indicatorXX.gif";
Dem geplanten Beispiel ähnlich funktioniert  Preloader-Info
|
Home
ZURÜCK