WEBDESIGN

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.



Kommentare ( 1 Kommentar )

  • derjanni Antworten ↓

    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

Schreib einen Kommentar