Preloader für Bilder einer Seite

[Melvin Cowznofski]

Hallo,

ich stand bei einem bestimmten Projekt vor der Aufgabe, einen Prelaoader für Bilder einer Seite zu verwirklichen.

Hier die Ausgangssituation bzw. das Projektziel:

Seite B : Auf dieser Seite befinden sich 6 riesengroße Bilder, die beim Aufruf der Seite ohne Nachladen sofort ausgegeben werden sollen, daher also vorgeladen werden müssen.

Seite A (Indexseite) : Von dieser Startseite aus soll ein Link zur Seite B verweisen und an dieser Stelle sollen die Bilder von Seite B in den Cache vorgeladen werden. Der Link soll aber erst erscheinen, wenn alle Bilder im Cache vorgeladen sind, bis dahin soll irgend eine "BITTE WARTEN" Ausgabe erfolgen.

Für mich essentielle Bedingungen:

Valides HTML5, valides CSS, Verwendung von Flexbox statt Floats, maximal schlanker und übersichtlicher Code - und das Wichtigste: Wenn ein User Javascript deaktiviert hat, dann muss Seite A genau so bedienbar sein, nur mit dem Unterschied, dass der Link zu Seite B sofort erscheint.

Was bisher geschah:

Ich habe noch nie in meinem Leben mit JS gearbeitet, deshalb hat es mich 3 Tage gekostet, das Netz nach Programmschnippseln, die ich hier verwenden kann, zu durchforsten. Leider waren die aber entweder schlichtweg falsch, oder zu kompliziert, oder die ganze Sache funktionierte nicht mehr, wenn JS deaktiviert war. Ich habe einfach nirgendwo eine für mich passende Lösung gefunden.

Deshalb habe ich von verschiedenen Seiten Code und Lösungsansätze kombiniert und jetzt ein Resultat, mit dem ich sehr zufrieden bin. Es entspricht auch zu 100% dem Projektziel und den oben genannten Bedingungen. Ganz besonders stolz bin ich auf die farblich abgestimmte "Warte-Grafik"! ;)

Ich habe das Ergebnis online gestellt mit dem Wunsch, dass sich das wer, der etwas Ähnliches auch schon mal geschrieben hat, ansieht. Für mich sieht alles perfekt aus aber vielleicht erkennt ja noch jemand eine technische Verbesserungsmöglichkeit. Ich habe absichtlich 6 sehr große Bilddateien verwendet. Einerseits, um genug Zeit zu haben, die "Warteposition" ansehen zu können, andererseits, um beim Aufruf von Seite B auch wirklich sicher feststellen zu können, ob die Bilder sofort da sind oder geladen werden. Mir ist selbstverständlich klar, dass man Bilddateien im realen Einsatz in anderen Bildgrößendimensionen zur Verfügung stellt und die "Warteposition" des Preloaders somit nur ganz kurz erscheint oder überhaupt nicht, weil alles so schnell vorgeladen ist.

Getestet habe ich in den aktuellen mobilen Versionen von Firefox, Opera und Chrome (jeweils mit und ohne aktiviertem JS) sowie auf meinem fest installierten Firefox. Die Wartezeiten waren bei mir (Laptopstick, LTE) immer so zwischen 5 und 20 Sekunden, je nach Verbindungsqualität.

Also ich bitte um Feefback. Kann ich den Preloader so lassen oder spricht was Gravierendes dagegen?

Guckst Du hier => Seite A des Preloaders

Mit lieben Grüßen

Melvin Cowznofski