Website schneller machen, Bilder vorausladen mit Javascript
Je nachdem wie viele Bilder auf einer Website vorhanden sind, geht ein groß Teil der Zeit zum Laden dieser drauf. Wenn man nun eine Ajax Gallerie auf der Website integriert hat, möchte man ja, dass die Bilder schnell wechseln. Bei Facebook ist dies beispielsweise der Fall, dass Bilder nahezu instant wechseln, wenn man "weiter" drückt.
So eine Geschwindigkeit wird dadurch erreicht, in dem bereits das nächste, oder die nächsten Bilder vorausgeladen werden, während man noch ein anderes betrachtet.
Um dies zu realisieren schreiben wir uns folgende Javascript Funktion:
Preload image – Funktion
function preloadImages(images) {
if (document.images) {
var i = 0;
var imageArray = new Array();
imageArray = images.split(',');
var imageObj = new Image();
for(i=0; i<=imageArray.length-1; ++i) {
imageObj.src=images[i];
}
}
}
Erläuterung:
Die Funktion erwartet einen String von Bilderpfaden, welche durch Kommas getrennt sind.
preloadImages('image1.png, this/images/image3.png, image4.jpg');
Nun werden alle diese 3 Bilder vorausgeladen. Aber Achtung, man muss diese Funktion geschickt einsetzen, um einen Geschwindigkeitsvorteil zu schaffen, wenn man blind 100000 von Bildern lädt, wird die Website am Ende eher langsamer als schneller.
Hi, die wirtschaftliche Notwendigkeit sowie die mit der Performance-Optimierung verbundenen Vorteile habe ich in meinem Blog mal zusammengefasst: http://www.kammerath.net/website-schneller-machen.html
Insbesondere, die Effekte, die Performance-Optimierung im SEO hat.
Viele Grüße,
Jan