 Imgage 1 ersetzen
Eine Startgrafik wird sofort angezeigt und mittels JavaScript später ausgetauscht. Zur Anwendung kommt dieses Beispiel, wenn Sie z.B. wegen der Ladezeit zunächst eine Vorab-Grafik anzeigen möchten, die nach kurzer Zeit gegen die entgültige Grafik ausgetauscht werden soll.
|
|
automatischer zeitverzögerter Bildtausch
Sie positionieren zuerst eine schnell zu ladende Grafik (1) mit den gleichen Dimensionen an der gewünschten Stelle. Die Grafik (2) wird erst später angezeigt. Bis dahin soll ein "Vorschaubild" oder "Platzhalter" zu sehen sein.
Ein JavaScript ersetzt die Grafik 1 erst nach Abschluß des Ladevorgangs für die anzuzeigende Grafik 2.
|
|
|
Zuerst: "image1-willkommen.gif"
Nach dem Laden: "image2-anilogo.gif"
|
Das Vorlade-Bild ist hier 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 der transparente Platzhalter angezeigt. Erst nach abgeschlossenem Ladevorgang würde das spätere Image angezeigt.
die Anweisungen
im Head
<script type="text/javascript" language="JavaScript">
<!-- Begin
var Grafik2 = new Image();
// hier Pfad + Dateiname eintragen
Grafik2.src = "image2.gif";
function TauscheBild() {
document['ErstesBild'].src = Grafik2.src;
}
// End -->
</script>
im Body-Tag
<body OnLoad="TauscheBild()" ..... >
Mit einer onload()-Anweisung + Zeitverzögerung, kann man den Zeitpunkt festlegen.
<body onLoad="setTimeout('TauscheBild()', 5000);">
Verzögerung hier: 5 Sekunden (5 000 Millisekunden)
im Body
Die Grafik wird mit einem üblichen <img>-Tag notiert. Ein zusätzliches Attribut zur Vergabe eines Namens wird eingetragen:
<img border="2" name="ErstesBild" src="image1.gif" width=242 height=54>
Erstellt: 04.09.2004
| 
Home • Bilder • Grafik laden + ersetzen
Download
BEISPIEL