Javascript Lazy Laden der progressiven Verbesserung Weg?

Question

Ich baue eine Website für einen Galeristen mit vielen Bildern pro Webseite. Daher möchte ich die Bilder auf der Webseite lazy laden, so dass die ursprüngliche Belastung weniger schwer. Ich möchte dies jedoch in einer "progressiven Verbesserung" umsetzen.

Ich habe viele Lazy Loading-Methoden gefunden, aber sie alle müssen mit dem HTML-Code so fummeln, dass die Webseite bei deaktiviertem Javascript nutzlos wäre. (z. B. bleibt das src-Attribut der img-Tags solange unbestimmt, bis die Bilder lazy loaded sind).

Um eine verzögertes Laden Methode zu implementieren progressivly denke ich, man folgende brauchen würde:

1. den Browser von Abrufen der Bilder zu verhindern, obwohl onstiges auf der Seite ist, aber dies nur tun, wenn Javascript aktiviert ist (So ​​auf Nicht-Javascript-Browser, die Bilder immer noch laden wie normal). Dies sollte geschehen, ohne den HTML-Code zu ändern.
2. speichern Sie die src Attribut in einem data-src Attribut
3. sequentually die Bilder laden, wenn

Von diesen drei Stufen der erste, der eine der härtesten scheint nach unten zu scrollen. Sogar this stackoverflow discussion lieferte keine Antwort, die die progressive Verbesserung nicht ruiniert.

Hat jemand irgendwelche Ideen?

Answer 1

Da keiner mit einer Antwort gekommen ist, werde ich posten, was ich eine vernünftige Lösung gefunden habe.

Dieses Problem läuft auf das Folgende hinaus: Während wir verhindern wollen, dass der Browser die Bilder lädt, wenn Javascript aktiviert ist, müssen wir sicherstellen, dass die Bilder heruntergeladen werden wenn Javascript deaktiviert oder nicht verfügbar ist.

Es ist schwer Javascript konsequent zu verwenden Laden von Bildern auf einer Seite zu stoppen, wenn sie in der „normalen“ Format sind:

<img src="path/to/image.jpg"></img> 

Um die Bilder aus dem Download wir ihre src entfernen müssen aufhören würde Attribute, aber in der Reihenfolge , um dies zu tun, sollte das DOM bereits geladen werden. Mit den Optimierungen vieler Browser ist es heutzutage schwer zu garantieren, dass die Bilder nicht bereits heruntergeladen werden.

Obendrein wollen wir sicher verhindern, dass bereits heruntergeladene Bilder unterbrochen werden, , denn das wäre einfach eine Verschwendung.

Deshalb wähle ich die folgende Lösung zu verwenden:

<img data-src="path/to/image.jpg" class="lazy"></img> 
<noscript> 
    <img src="path/to/image.jpg"></img> 
</noscript> 

Beachten Sie, wie die Bilder außerhalb des noscript Tag haben keine src aber ein data-src statt zuschreiben. Dies kann von einem Lazyloading-Skript verwendet werden, um beispielsweise die Bilder einzeln zu laden.

Nur wenn JavaScript nicht verfügbar ist, werden die Bilder im Inneren des noscript Block sichtbar sein, so gibt es keine Notwendigkeit, die .lazy Bilder zu laden (und keine Möglichkeit, dies zu tun, da Javascript ist nicht verfügbar).

Wir brauchen die Bilder allerdings verstecken:

<noscript> 
    <style> 
     .lazy { 
      display: none; 
     } 
    </style> 
</noscript> 

Wie die img-Tags innerhalb des noscript Block, diese style Block an den Browser nur dann sichtbar wird, wenn Javascript ist nicht verfügbar.

Zu einem verwandten Hinweis: Ich dachte, ich könnte die HTML-Größe reduzieren, indem Sie keine src oder data-src Attribute auf die faulen Bilder überhaupt setzen. Dies wäre nett, weil die redundante URL von der Seite entfernt wird, spart uns etwas Bandbreite.

Ich dachte, ich könnte das src Attribut aus dem noscript Block mit Javascript sowieso zupfen. Dies ist jedoch unmöglich: Javascript hat keinen Zugriff auf den Inhalt eines Noscript-Blocks. Das obige Schema ist daher der effizienteste, den ich mir vorstellen konnte.

Answer 2

Kein Attribut src ist ungültig HTML, das ist leider, wie die meisten faulen Bildlader funktionieren.

ich auf einem lazyloader arbeite, die gültigen HTML-Markup verwendet, Github Link: https://github.com/tvler/lazy-progressive-enhancement

Ein lazyloaded Bild würde durch das Einwickeln in einem noscript Elemente deklariert werden:

<noscript><img alt="hello!" src="..."></noscript>

und die Endgültig ausgegebenes HTML wäre

<img alt="hello!" src="...">.

Sie können das gesamte Projekt auf Github sehen, die mit Batch-Laden beschäftigt, Event & mehr, Einhaken aber hier ist die grundlegende Funktionalität im Rahmen eines einzigen noscript Bild:

var noscript = document.querySelector('noscript'), img; 
(img = document.createElement('div')).innerHTML = noscript.textContent; 
noscript.parentElement.replaceChild(img.firstChild, noscript);