Trifft man keine weiteren Vorkehrungen bei Grafiken mit einem Rollover-Effekt, so kommt es beim ändern der Grafiken zu unschöne Verzögerungen durch Nachladen.
Das „Preloaden“ der erst später erscheinenden Grafiken, kann dies verhindern.
Dazu wird eine Schleife für jedes Bild im Dokument ein Mal aufgefürt. In dieser wird die Adresse des aktuellen Bildes ermittelt. Endet sie auf die in wechselendung_normal oder in wechselendung_highlight angegebenen Zeichen, so werden diese durch die Zeichen der jeweils anderen Variablen ersetzt. Dazu müssen die Zeichenketten in wechselendung_normal und wechselendung_highlight gleich lang sein. Die so entstandene neue Adresse wird als Adresse eines neuen Bildobjekts angegeben, wodurch die unter dieser Adrese existierende Grafik geladen wird. Existiert unter diese Adresse keine Grafik, so wird zwar trotzdem ein Bildobjekt erzeugt, was aber keine negativen Auswirkungen hat.
Für genauere Erklärungen lies bitte unter Rollover-Effekt, die Bedingungen für Bildnamen sind in beiden Scripts gleich. Soll dieses Script zusammen mit dem dort vorgestellten Script verwendet werden, müssen die Zeichenketten in wechselendung_normal und wechselendung_highlight die gleichen sein wie in endungszeichen_1 und endungszeichen_2.
Das Script sollte direkt nach dem Laden des Dokuments aufgerufen werden, was in diesem Fall durch die erste Codezeile gewährleistet ist.
window.onload = img_preload; //Startet die Funktion, sobald das Dokument geladen wurde
function img_preload() // Quelle: www.el-supremos-place.de
{
var bild, letzter_punkt, namensendung, uri, endung, preload;
var wechselendung_normal = '_nor';
var wechselendung_highlight = '_hig';
/*
Es wird ueberprueft, ob die in 'wechselendung_normal' und oder 'wechselendung_highlight' angegebenen Zeichen im URI eines Bildes direkt vor
der Dateiendung (also am Ende des Dateinamens) vorkommen. Ist dies der Fall, so werden diese Zeichen durch die der jeweils anderen Variablen
ersetzt. Endet ein Dateiname also auf die Zeichen in 'wechselendung_normal', so werden diese Zeichen durch die in 'wechselendung_highlight'
angegebenen ersetzt. Ist es umgekehrt, dann anders herum. Es wird davon ausgegangen, dass es sich bei diesem neuen URI um das Bild handelt, das
pregeloadet werden soll.
Beide Variablen muessen gleich lang sein!
*/
for (var i = 0; i < document.getElementsByTagName('img').length; i++) //Beginn der fuer jedes Bild im Dokument ausgefuehrten Schleife
{
bild = document.getElementsByTagName('img')[i]; //Das aktuelle Bild wird in 'bild' gespeichert
letzter_punkt = bild.src.lastIndexOf('.'); //'letzter_punkt' ist die Position letzten Punkts im aktuellen URI
namensendung = bild.src.slice(letzter_punkt - wechselendung_normal.length, letzter_punkt); /*Ermittelt die Zeichen am Ende des
Dateinamens (bis zum letzten Punkt, so viele, wie 'wechselendung_normal' bzw. 'wechselendung_highlight' lang ist. Dies ist der Grund, warum die
beiden Variablen gleich lang sein muessen).*/
if (namensendung == wechselendung_normal || namensendung == wechselendung_highlight) /*Wird nur ausgefuehrt, wenn die Endung des Namens
einer der beiden Zeichenketten entspricht, welche angeben, Bilder mit welchen Zeichen am Ende des Dateinamens pregeloadet werden sollen*/
{
uri = bild.src.slice(0, letzter_punkt - namensendung.length); /*In 'uri' wird die URI des aktuellen Bildes vom Zeichen 0 bis zur
Position der Endung des Dateinamens gespeichert*/
endung = bild.src.slice(letzter_punkt); //Die Dateiendung wird in 'endung' gespeichert
if (namensendung == wechselendung_normal) /*Mit Hilfe des Image-Objekts wird das Bild pregeloadet. 'preload.src' wird je nach
Endung des Dateinamens aus 'uri' und 'endung' sowie 'wechselendung_normal' oder 'wechselendung_highlight' zusammengesetzt (siehe langer
Kommentar oben).*/
{
preload = new Image();
preload.src = uri + wechselendung_highlight + endung;
}
else
{
preload = new Image();
preload.src = uri + wechselendung_normal + endung;
}
}
} //Ende der fuer jedes Bild im Dokument ausgefuehrten Schleife
} //Ende der Funktion
Viel Spaß mit dem Script...
El Supremo
