 Imgage 1 ersetzen
... nachdem Image 2 vollständig geladen wurde.
Möchte man ein Image sofort anzeigen und später durch ein anderes ersetzen (z.B. wegen Ladezeit), positioniert man zuerst ein schnell zu ladendes Image (1) mit den gleichen Dimensionen. Das Image (2) wird erst nach abgeschlossenem Ladevorgang angezeigt, bis dahin wird ein "Vorschaubild" oder "Platzhalter" zu sehen sein.
Ein JavaScript ersetzt das Image-1 erst nach Abschluß des Ladevorgangs des Image-2.
|
|
|
Zuerst: "image1-willkommen.gif"
Nach dem Laden: "image2-anilogo.gif"
|
Das Vorlade-Bild ist 658 Bytes groß und wird relativ schnell angezeigt. Sie können natürlich auch ein transparentes Pixel dort einsetzen, dann wird für den Betrachter unsichtbar (vorausgesetzt border="0") erst einmal dieses Bild angezeigt. Erst nach vollständigem Laden der Bilddatei (hier 50 kB), wird das spätere Image angezeigt.
Mit einem onload() - Event, der zeitlich verzögert wird, könnte man den Zeitpunkt sogar festlegen.
<body onLoad="setTimeout('TauscheBild()', 10000);">
Verzögerung hier: 10 Sekunden (10 000 Millisekunden)
die Anweisungen
im Head
Zur Anpassung (mögliche) Änderungen im Script:
| Element |
hier im Beispiel |
ersetzen mit |
| Tauschbild |
image2.gif |
Dateiname |
| Bildname (nicht erforderlich) |
ErstesBild |
Text |
|
<script type="text/javascript" language="JavaScript">
<!-- Begin
var preload = new Image();
preload.src = "image2.gif"; // hier URI Image2 eintragen
function TauscheBild() {
document['ErstesBild'].src = preload.src;
}
// End -->
</script>
im Body-Tag
<body OnLoad="TauscheBild()" ..... >
 im Body
Zur Anpassung (mögliche) Änderungen im Aufruf:
| Element |
hier im Beispiel |
ersetzen mit |
| zu tauschendes Bild |
image1.gif |
Dateiname |
| Bildbreite |
242 |
Wert in Pixel |
| Bildhöhe |
52 |
Wert in Pixel |
| Bildname (nicht erforderlich) |
ErstesBild |
Text |
|
<img border="2" name="ErstesBild" src="image1.gif" width=242 height=54>
Erstellt: 04.09.2004
| 
WWW.WEB-TOOLBOX.NET
Download 
BEISPIEL 
ZURÜCK