 Imgages vorladen - Demo (in den Browsercach laden)
Für die schnelle Anzeige von Grafiken möchten sie sicherstellen, dass die Grafiken vorab vom Server geladen werden. Manchmal möchten sie auch Grafiken für die nächste Seite bereits vorladen, damit die Folgeseite zügiger angezeigt wird? |
|
Grafiken vorladen Demo
Für eine MouseOver-Funktionen sollte das MouseOver-Bild schon bereitgestellt werden (Laden der Grafik in den Browserspeicher), 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.
Es gibt mehrere Möglichkeiten eine Grafik vorzuladen:
 mit HTML-Anweisungen (lediglich ein Trick)
mit CSS-Anweisungen (genauso trickreich)
mit JavaScript-Anweisungen
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
Vorladen (die Engländer sagen: "preload" [pri-lood])
- preload mit HTML-Anweisungen
- preload mit CSS-Notierungen
- preload mit JavaScript
 Preload 01 mit HTML oder CSS
Preload 02 mit Javscript - Grafiken im Array
Preload 03 mit Javscript - Grafiken als Parameter der Funktion
Preloader-Info anzeigen
|
Home • Bilder • Grafiken vorladen Demo