IntersectionObserver und Bilder mit unbekannter Höhe

Question

Ich habe eine Seite mit vielen quadratischen Bildern (gleiche Breite und Höhe), wo Größe mit der Breite kontrolliert wird: 50%. Sie werden lazad geladen mit lozad.js (https://www.npmjs.com/package/lozad), die IntersectionObserver verwendet. Das Problem ist, dass IntersectionObserver berechnet alle Bilder sind Sichtbarkeit, da die Höhe ist 0 (oder unbekannt) und alle Bilder werden sofort geladen. Ich möchte die Höhe gleich der Breite einstellen, kann aber nicht sehen, wie das möglich ist !?

<img class="lozad" style="width:50%;" data-src="1.jpeg"> 
<img class="lozad" style="width:50%;" data-src="2.jpeg"> 
<img class="lozad" style="width:50%;" data-src="3.jpeg"> 
<img class="lozad" style="width:50%;" data-src="4.jpeg"> 
<img class="lozad" style="width:50%;" data-src="5.jpeg"> 
<img class="lozad" style="width:50%;" data-src="6.jpeg"> 
. 
. 
. 
. 
<img class="lozad" style="width:50%;" data-src="99.jpeg"> 
<img class="lozad" style="width:50%;" data-src="100.jpeg"> 

Answer 1

Ich habe the similar page implementiert, ohne lozad.js zu verwenden. Die Idee basierte auf der Annahme, dass Sie die Anzahl der Bilder annähern können, die garantieren würde, die verfügbare Bildschirmhöhe die ganze Zeit zu decken, sagen Sie . Dann kann Ihre Seite nur zwei Bilder laden und Bilder außerhalb des Bildschirms laden, wenn der Benutzer die Seite herunterscrollt, indem er die API IntersectionObserver verwendet.

Zuerst Ihre Seitenvorlage zusätzliche data-idx anbieten, die von 0 beginnt:

<img data-idx="0" data-src="0.jpeg" class="image1"> 
<img data-idx="1" data-src="1.jpeg" class="image1"> 
<img data-idx="2" data-src="2.jpeg" class="image1"> 
... 

Also, wenn die Seite zum ersten Mal geladen wird, wird kein Bild geladen werden, da src Attribut noch nicht zur Verfügung gestellt. Dann unter Pseudo-Code zeigt, was Ihr Javascript tun können:

1. Abfrage alle img.image1 Tags und halten es als list
2. für jeden img, fügen load Ereignis-Listener, die this.observe(img)
3. in indexToObserve Setter ruft zum ersten 2 img s aus dem angegebenen Index, set src Attribut mit Wert von data-src
4. richten Sie die API so, dass es erkennt, dass das beobachtete Element gescrollt wird, und setzt dann indexToObserve auszulösen Lade 2 weitere Bilder

Weitere Details here erläutert, die Beispiele 3 (mit glattem JavaScript, eckig, oder reagieren) und Verbindungen zu und repos demos bietet.