Nach dem ich mit meinem gecodeten rscLoader 0.02.77 Preloader einige Zeit gearbeiet habe, bin ich auf die Idee gekommen, diesen noch ein Mal in den verschiedensten Browsern zu testen.

Verdutzt musste ich leider feststellen, dass dieser zwar wie erwartet funktioniert, aber die JavaScript Console mit ein paar klitzekleinen Fehlern zugemüllt hatte … (more…)

Es ist schon eine ganze weile her, als ich das letze mal was in meinem Blog veröffentlich habe… Jetzt habe ich aber wieder zeit ein bisschen was zu veröffentlichen.

Heute habe ich mir mal vorgenommen einen asynchronen Resource-Loader für meine Webapps zu schreiben. Natürlich gibt es im Netz für alles mögliche die verschiedensten Scripts, aber bekannterweise tun die meisten nicht das was sie sollen, sind viel zu komplex oder sind einfach mit Funktionen überfüllt die man nicht braucht.
Meine Grundidee dabei war es einen schicken Preloader, der mir alle meine Stylesheets, Scripts und Bilder für meine App vorlädt, zu basteln.

Gesagt – getan, als erstes habe ich mir eine kleine Javascript-Klasse geschrieben, die sich automatisch bei der Scriptausführung in den globalen Variablenbereich der Website initialisiert.
Um die Dateien nun zu laden muss man einfach nur rscLoader.load('*Link-Zur-Datei*', '*Typ*'); in den HTML-Body schreiben; die dateien werden automatisch und asynchron geladen, ohne die Website anzuhalten.
Natürlich habe ich auch Events eingebaut, mit denen man automatisch den Status der geladenen Dateien abrufen kann. Diese habe ich als sogenannte listener implementiert: rscLoader.listen('*Typ*', function(stats, resources) { // Tu alles was du willst }); In denn Callbacks dieser Events ist es möglich, den aktuellen Status der Datein des übergebenen Typs zu überprüfen und gegebenenfalls eine Aktion durchzuführen.

Quelltext ist auf Github verfügbar: rscLoader 0.01.06

Für eine bessere Performance habe ich mich entschieden zwei weitere Thumbnailgrößen einzubauen.
Nach einer kurzen Bastelphase an der Plattform, kann sich das Ergebnis sehen lassen:

• Es stehen insgesamt vier verschiedene Bildgrößen nach dem Upload zur Verfügung:
  • Das Originalbild mit einer maximalen Größe von 1024 x 714 Pixeln
  • Ein maximal 300 Pixel großes Thumbnail
  • Ein maximal 200 Pixel großes Thumbnail
  • Und ein maximal 100 Pixel großes Thumbnail

Nach diesem kleinen Update lädt die gesamte Seite um einiges schneller, da die Miniaturbilder automatisch mit einer sehr geringen Dateigröße geladen werden.