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

[Felix Riesterer]

Lieber Melvin,

Also ich bitte um Feefback.

fehr clevere Löfung! Und mir gefällt der sehr minimalistische Ansatz.

JavaScript-Code, der im HTML5-Dokument direkt steht, "verstecke" ich so:

<script type="text/javascript">
//<![CDATA[
document.getElementById("preloaderScreen").style.display = "flex";
function hidePreloaderScreen() {
	document.getElementById("preloaderScreen").style.display = "none";
}
//]]>
</script>

Meiner Ansicht nach spricht (außer Prinzipien, der "reinen Lehre" und Dogmen) nichts gegen diese Vorgehensweise. Man könnte jetzt natürlich [reine Lehre: DOMContentLoaded, Code in externe JS-Datei], muss aber nicht.

Liebe Grüße,

Felix Riesterer.

[Mitleser]

Man könnte jetzt natürlich [reine Lehre: DOMContentLoaded

Eben nicht. Der "Clou" an seiner Lösung basiert essentiell auf "load", was wiederum problematisch ist.

[Matthias Apsel]

Hallo Felix Riesterer,

JavaScript-Code, der im HTML5-Dokument direkt steht, "verstecke" ich so:

<script type="text/javascript">
//<![CDATA[

  /* code */ 

//]]>
</script>

Warum nicht einfach so?

<script>

  /* code */ 

</script>

Bis demnächst
Matthias

[Felix Riesterer]

Lieber Matthias,

Warum nicht einfach so?

<script>

  /* code */ 

</script>

über das inzwischen optionale type-Attribut kann man sicher reden, aber wenn das HTML als XML verarbeitet werden soll, dann würden irgendwelche Ampersands zu Validierungsfehlern führen. Deswegen das CDATA-Teil. Ich notiere deswegen auch leere Elemente als selbst-schließende Elemente, wie br, img, meta usw. Und ja, mir fällt auch gerade kein Use-Case ein, in dem es nach XML validieren müsste - aber warum sollte ich es deswegen weglassen? Habe einfach zu lange XHTML geschrieben, als dass ich das für HTML5 jetzt wieder ablegen wollte.

Was mein CMS angeht, so verwende ich dort einen echten HTML5 Parser, der mir das HTML5 baut. Wenn der da keine XHTML-Konformität berücksichtigt, dann ist das sicherlich nur ein Konfigurationsproblem, welches ich im Ernstfall dann lösen müsste.

Liebe Grüße,

Felix Riesterer.

[Melvin Cowznofski]

Hallo Felix,

Ich notiere deswegen auch leere Elemente als selbst-schließende Elemente, wie br, img, meta usw. Und ja, mir fällt auch gerade kein Use-Case ein, in dem es nach XML validieren müsste - aber warum sollte ich es deswegen weglassen? Habe einfach zu lange XHTML geschrieben, als dass ich das für HTML5 jetzt wieder ablegen wollte.

Lustig, bei mir ist es genau umgekehrt. Mich haben die in der Zeit, wo ich in xhtml 1.0 strict geschrieben habe, immer derartig genervt, dass ich es heute noch genieße, sie bei HTML5 nicht verwenden zu müssen. =)

Und danke für Deine ursprüngliche Antwort auf mein OP!

Mit lieben Grüßen

Melvin Cowznofski

[Mitleser]

Und danke für Deine ursprüngliche Antwort auf mein OP!

Gerne!

[Mitleser]

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

Man könnte anmerken, dass die Eventregistrierung nicht ins HTML gehört und die Auskommentierung im JavaScript überflüssig ist. Mir persönlich scheint der ganze Ansatz der Preloaders hier an sich auch ziemlich befremdlich, das ist vielleicht aber auch dem Beispiel geschuldet.

Ansonsten ist der Lösungsansatz ganz interessant, hat aber einen Haken: er ist zu grob. Du wartest aktuell, bis alle Ressourcen geladen sind. Der Job lautet aber eigentlich: warten, bis die fraglichen Bilder geladen sind.

Das mag in dem Beispiel noch vernachlässigbar sein. Wenn die Seite aber größer wird und jede Menge weitere (z.B. auch externe) Ressourcen referenziert, kann es problematisch werden. Evtl. sind die fraglichen Bilder dann längst geladen und das Load-Event tritt erst viel später ein.

Ich muss allerdings zugegeben, dass alle mir spontan einfallenden Lösungsmöglichkeiten hierfür die Komplexität des JavaScripts deutlich erhöhen würden.