Nur Bilder die in den Viewport ragen laden (das gleiche für CSS-Dateien)

[nick]

Ich will mich mittels CSS-Framework Bootstrap an einer Single Page Webseite versuchen.

Der Single Page Ansatz kommt für mich aber nur in Frage falls ausschließlich Bilder die in den Viewport ragen geladen werden. Lazy loading nennt sich das offenbar.

Welche Frameworks oder Techniken helfen mir dabei?

[pl]

Der Single Page Ansatz kommt für mich aber nur in Frage falls ausschließlich Bilder die in den Viewport ragen geladen werden. Lazy loading nennt sich das offenbar.

Nein. Vielmehr ist Lazy Load das Gegenteil von SPA. Während LL dafür sorgt, daß Inhalte nachgeladen werden liegen diese bei einer SPA bereits im Browser vor.

MfG

[Gunnar Bittersmann]

@@pl

Nein. Vielmehr ist Lazy Load das Gegenteil von SPA.

Nein. Ich sehe nicht, warum das Eine das Andere ausschließen sollte.

SPA heißt: single page application, d.h. man verlässt beim Interagieren die Seite nicht.

SPA heißt nicht, dass alle Inhalte bereits initial geladen werden. Insbesondere assets wie Bilder nicht.

LLAP 🖖

[pl]

@Gunnar Bittersmann

Nein. Vielmehr ist Lazy Load das Gegenteil von SPA.

Nein. Ich sehe nicht, warum das Eine das Andere ausschließen sollte.

On Demand und Lazy Load wird gerne verwechselt. Ich meinte On demand loading.

SPA heißt: single page application, d.h. man verlässt beim Interagieren die Seite nicht.

SPA heißt nicht, dass alle Inhalte bereits initial geladen werden. Insbesondere assets wie Bilder nicht.

Inhalte müssen bei einer SPA lokal im Browser vorliegen. Was nicht heißt daß sie gleich sichtbar sind.

MfG

[Gunnar Bittersmann]

@@pl

SPA heißt nicht, dass alle Inhalte bereits initial geladen werden. Insbesondere assets wie Bilder nicht.

Inhalte müssen bei einer SPA lokal im Browser vorliegen. Was nicht heißt daß sie gleich sichtbar sind.

Und was aber auch nicht heißt, dass sie gleich geladen werden müssen. Sondern erst dann, wenn sie wirklich benötigt werden. Oder kurz bevor sie vermutlich benötigt werden.

In diesem Fall heißt das: Bilder sollen erst geladen werden, wenn sie in den Viewport kommen. Oder kurz vorher – in der Annahme, dass der Nutzer, wenn sie schon bis dorthin runtergescrollt hat, auch noch ein bisschen weiterscrollen wird.

Ob SPA oder nicht, hat damit nichts zu tun.

LLAP 🖖

[Gunnar Bittersmann]

@@nick

Ich will mich mittels CSS-Framework Bootstrap an einer Single Page Webseite versuchen.

Warum das denn? CSS bietet mittlerweile gegenüber Bootstrap weitaus bessere Möglichkeiten zur Seitengestaltung, die nicht nur individuellere Gestaltung zulassen, sondern auch noch wesentlich einfacher handhaben sind. Ein sehr ernstgemeinter Tip: kein Bootstrap verwenden!

Der Single Page Ansatz kommt für mich aber nur in Frage falls ausschließlich Bilder die in den Viewport ragen geladen werden. Lazy loading nennt sich das offenbar.

Damit hast du doch dein Suchbegriff. Die Suche nach lazy load images führt mich u.a. zum Artikel Responsive Images – width/height-Attribute entfernen, lazy loading & padding-bottom Trick meines geschätzten Kollegen.

LLAP 🖖

[nick]

Genau solche Links suchte ich. Der Artikel von 2014 nennt folgende Lösungen für das Lazy Loading (wobei Lazy Loading oft On Demand meint):

1. Unveil.js
2. das W3C Attribut lazyload="1"
3. Attribut postpone

Würdet Ihr das erstgenannte jQuery Plugin Unveil.js auch heute noch empfehlen? lazyload funktioniert nur in Microsoft Browsern. Daher keine Option für mich. Und postpone hat es offenbar noch nicht in den Standard geschafft.

[nick]

Hier noch ein Link von mir (Artikel vom September 2018): https://css-tricks.com/the-complete-guide-to-lazy-loading-images/

[Gunnar Bittersmann]

@@nick

Hier noch ein Link von mir (Artikel vom September 2018): https://css-tricks.com/the-complete-guide-to-lazy-loading-images/

Ah, da ist ja auch der Intersection Observer erwähnt. Ich konnte mich noch dran erinnern, vor Kurzem darüber gelesen zu haben. War schon drauf und dran, meinen geschätzten Kollegen anzurufen, aber dann hat ja der @Matthias Scharwies in diesem Posting auf den Heise-Artikel Lazy Loading Images mit Custom Elements verwiesen …

Noch etwas Futter dazu:

• MDN: IntersectionObserver
• Neil Roberts on David Walsh Blog: Observing Intersection Observers
• Dennis Gaebel: Intersection Observer: Track Elements Scrolling Into View

LLAP 🖖