Homepagebau
Dateiversion:
diesen Beitrag diskutieren,
ergänzen, eine Frage stellen

Grafiken vorladen

Schwierigkeit: für Anfänger

 

PreLoad von Grafikdateien:

Beschreibung:

Bei Hovereffekten für Buttons ("onMouseOver" und Co.) - aber auch einigen anderen Gelegenheiten - ist es meist sinnvoll, eben die Grafiken, welche angezeigt werden sollen, wenn ein bestimmtes Ereignis eintritt, mit einem kleinen Script in den Cache des Browsers zu laden. Denn: solange diese Grafiken nicht als IMAGE-Objekt im HTML-Code erwähnt werden, geschieht dies nicht.
Die Folge sind lästige Verzögerungen, sobald der Besucher auf das Objekt geht, in denen der Rechner nachträglich die notwendigen Daten vom Server anfordern muss.

Off-Screen Images und Preload:

Damit eine Grafikdatei zusammen mit der Seite geladen wird, müssen wir sie dem Browser zunächst bekannt machen.

Dabei hilft uns eine einfache Anweisung: 

Bild = new Image();
Bild.src = "image.gif";

Es wird also ein Objekt der Klasse "Image" erzeugt. Der Eigenschaft "SRC" = "source": also der Quelldatei übergeben wir den Pfad der zu ladenden Datei als String. Damit ist dem Browser die entsprechende Datei nun bekannt - das ist schon alles.

Der gleiche Quellcode lässt sich auch etwas kompakter schreiben:

(new Image()).src = "image.gif";

Beispiel:

Vielleicht kennen sie dass: hier ist ein kleiner Button mit einem JavaScript Hover-Effekt. Ohne unseren Zusatz wird die zweite Grafik erst geladen, wenn sie mit der Maus auf den Button zeigen. Mit der Ergänzung dieses Scripts aber, ist die Grafik nun bereits im Browsercache und wird sofort angezeigt.

Übrigens: oben auf dieser Seite finden sie auch ein Skript für mehrere Grafikdateien

Der Quellcode:

<HEAD>

  <SCRIPT language="JavaScript">
  <!-- Grafik-Preload (Autor: All-Community.de)
    (new Image()).src = "hover.gif";
  //-->
  </SCRIPT>

</HEAD>

<BODY>

  <!-- "Hover-Button" Autor: www.All-Community.de -->

  <IMG src="button.gif"
   onMouseover="this.src='hover.gif'"
   onMouseout="this.src='button.gif'">

</BODY>

... und das Ergebnis:

 

Autor: Thomas Meyer

Home: www.All-Community.de

 Kontakt: