Tipps und Tricks zu den Themen: Software- und Webentwicklung

Donnerstag, 30. Mai 2013

Bilder mit Javascript vorladen (Preloader)

Ein guter Ratschlag vorweg: Es ist grundsätzlich nicht empfehlenswert Grafiken vorzuladen, die unmittelbar bei einem Seitenaufruf eh geladen und dargestellt werden. Nur in seltenen Fällen ist dies wirklich erforderlich und auch da wird diese Methode Ihre Probleme mit sich ziehen, worauf hier nicht weiter eingegangen werden soll. In diesem Artikel geht es darum Grafiken vorzuladen, die innerhalb einer Seite dynamisch ausgetauscht bzw. dargestellt werden sollen (z.B. MouseOver-Grafik, Slideshow, Animationen, Popups, etc.).

Im Internet findet man viele Möglichkeiten um Bilder vorzuladen. Von einer reinen CSS-Lösung ist dabei abzuraten, da der Zeitpunkt des Vorausladens nicht bestimmt werden kann und sich somit der Seitenaufbau spürbar verlängert. Dabei möchte man die Seitenperformance doch gerade optimieren. Mit einer zeitversetzten bzw. Event-gesteuerten Javascript-Funktion zum Vorladen von Bildern kann dagegen ein zufriedenstellendes Ergebnis erzielt werden.

Allerdings sind die verschiedenen Javascript-Lösungen, die man im Netz finden kann, mit einem Nachteil behaftet: sie laden die Grafiken nicht in den Browsercache, sondern liegen vielmehr als Javascript-Objekt vor. Das ist natürlich nicht das, was man in der Regel möchte. Eine weitere Auffälligkeit ist, dass Grafiken, die dynamisch ausgetauscht worden sind und nicht im ursprünglichen Dokument enthalten waren, nach einer Zeit aus dem Speicher entfernt werden (das Speicher-Management von Firefox funktioniert bspw. so). Besonders wenn man im Browser innerhalb der Tabs wechselt bzw. neue öffnet und irgendwann wieder zur ursprünglichen Seite zurückkehrt, ist dies zu beobachten (Grafiken müssen erst wieder in den Speicher geladen werden). Dabei ist es egal, ob die Grafiken vorher durch ein "CSS:hover" geladen wurden oder per Javascript mittels "new Image()".

Wir haben eine Lösung gefunden, die beides ermöglicht:

1. Grafiken werden im Hintergrund voraus geladen ohne dabei den eigentlichen Seitenaufruf zu verzögern
2. Grafiken bleiben im Browsercache über die gesamte Browsersitzung erhalten

Praktisch gesehen ist es ein einfacher und unspektakulärer Trick. Zunächst wird im HTML-Dokument kurz vor dem schließenden Body-Tag ein versteckter DIV-Container mit der ID "prefetch" angefügt: Die eigentliche Funktion zum Vorladen der Bilder kommt in den Javascript-Teil: Aufruf der Funktion mit Übergabe eines Array, bestehend aus URLs der Bilder: Zur Einfachheit wurde hier auf die jQuery-Anweisung "$(window).load()" zurückgegriffen, da ein browserübergreifendes onLoad-Event-Handling das Beispiel nur unnötig aufschwemmen würde. Durch das verzögerte Aufrufen wird erreicht, dass der Seitenaufbau nicht in irgendeiner Weise blockiert wird.

Erst nachdem die HTML-Seite vollständig geladen ist, wird die Funktion "preloadImages()" aufgerufen und fügt sämtliche Bilder die vorgeladen werden sollen als <img>-Objekt in den versteckten DIV-Container "preload". Somit stehen diese dann auch längerfristig im Browsercache zur Verfügung und werden bei Bedarf unmittelbar, ohne Verzögerung angezeigt.



1 Kommentar:

  1. Schöner Artikel Bilder mit Javascript vorladen. Ich denke, es ist sinnvoll und einzigartige Artikel ist. Ich liebe diese Art von Artikel und diese Art von Blog. Ich habe es sehr genossen. Vielen Dank für Ihre Website. Es wird für Webentwicklung Hannover .

    AntwortenLöschen