交差点の画像と不明な高さの画像

Question

サイズが幅：50％で制御されている正方形の画像（幅と高さが同じ）が多いページがあります。これらは、IntersectionObserverを使用するlozad.js（https://www.npmjs.com/package/lozad）で遅延ロードされます。問題は、高さが0（または不明）ですべての画像がすぐに読み込まれるため、IntersectionObserverはすべての画像を表示することです。高さを幅と同じにしたいのですが、どうやってこれが可能かわかりません！

<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

lozad.jsを使用せずにthe similar pageを実装しました。 この考えは、利用可能な画面の高さを常にカバーすることを保証する画像の数、たとえばINTERSECT_PAGESIZE = 2を近似できるという仮定に基づいていました。次に、ユーザーがIntersectionObserver APIを使用してページを下にスクロールすると、ページには2つのイメージとlazyloadオフスクリーンイメージしか読み込まれません。

まず、ページテンプレートは、0から始まるdata-idx追加を提供します。

<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"> 
... 

ページが最初にロードされるときsrc属性がまだ提供されていないように、何のイメージがロードされません。クエリ

1. すべてimg.image1のタグをして最初の2のために、indexToObserveセッターにthis.observe(img)
2. を呼び出すloadイベントリスナーを追加し、各imgためlist
3. ように保管してください。そして、以下の擬似コードは、あなたのjavascriptが何ができるかを示していimgが指定されたインデックスから値data-srcの値を
4. に設定して、観測された要素がスクロールダウンされたことを検出してから新しいを設定するように設定しますは

詳細は3例を提供here説明ローディング2枚の以上の画像をトリガする（無地のJavaScript角度で、または反応させ）とレポおよびデモへのリンクします。