Entwicklung - Javascript/Ajax - Bilder in HTML-Dateien vorladen

manchmal ist es für bestimmte Effekte nützlich, dass Bilder schon vorgeladen sind wenn die entsprechende Aktion ausgeführt wird.
Beispiel: es soll bei 'onMouseOver' ein Bild gegen ein neues Bild ausgetauscht werden. Im Normalfall wird dann, wenn man mit der Maus über das Bild fährt erst das neue Bild geladen - und wenn man dann nur kurz mit der Maus über das Bild fährt, kann es sein, dass man von diesem Effekt gar nichts mitbekommt, weil das neue Bild ja noch nicht geladen ist.

Hier mal 2 Lösungen, um Bilder vorzuladen:

mit Javascript:

var bild1 = new Image();
bild1.src="bild1.gif";
var bild2 = new Image();
bild2.src="bild2.gif";
usw.

oder man zeigt das zuladende Bild einfach an (mit einer Höhe und Breite von 1 Pixel):

< img src="bild1.gif" width="1" height="1" alt="" />

das 1 Pixel grosse Bild fällt i.d.R. fast gar nicht auf, man kann es z.B. aber auch geschickt z.B. hinter einem Link einsetzen und es fällt gar nicht mehr auf. Wenn zuviele Bilder geladen werden sollen macht das mit dem 1Pixel-Bild natürlich keinen Sinn - aber bei wenigen Bildern ist es eine einfache Lösung - ohne Javascript einsetzen zu müssen.

Um das zu bewerkstellugen habe ich noch eine ganz nette Funktion gefunden, die im HTML-Head oder von extern geladen wird:

function preloader() {
if (!document.images) {
return;
}
var array= new Array();
var arguments = preloader.arguments;
for (var i=0; i<arguments.length; i++) {
array[i] = new Image();
array[i].src = arguments[i];
}
}

Im Body-Tag werden dann die Bilder folgendermassen eingebunden:

onload="preloader('bild01.gif','bild02.jpg','bild03.png')"