 Imgages vorladen 02 (mit HTML und CSS)
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 mit HTML und CSS
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. Meine Beispiele:
Vorladen 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)
 Preload Demo
Preload mit Javscript 01
Preload mit JavaScript 02
Preloader-Info anzeigen
|
Home
ZURÜCK 
Demo