Zurb Foundation フレームワークの使用。レスポンシブ画像を提供する Foundation Interchange というコンポーネントがあります。
https://foundation.zurb.com/sites/docs/interchange.htmlを参照してください
ビューポートに基づいて画像を提供しますが、遅延読み込みをサポートしていないため、Intersection ObserverAPI を使用して一部の画像を遅延読み込みしたいと考えています。
https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/を参照してください
目的：
IMG何かを遅延ロードしてクラスに「遅延」を与えることを選択するとFoundation Interchange、低解像度/小さなプレースホルダー画像が提供されます。この部分は簡単です。次にIntersection Observer、パス内の 1 つのフォルダーを単純に変更して、高解像度の画像を指すようにします。これは難しい部分です。
重要な注意点：
レスポンシブ画像を読み込んでいるため、ほとんどの手法は機能しません。そのため、ビューポートによって異なる 1 つの画像を単純に指すことはできません。
クラスを任意の画像に適用し、 に基づいて別の画像を遅延読み込みさせたいと考えていますIntersection Observer。低解像度の小さな画像をすぐにロードし、後で別の高解像度画像と交換します。
ほとんどのソリューションのように data-src を使用する代わりに、画像へのパスを変更します。
たとえば、次のように仮定しSRCます。
<img class=”lazy” src="assets/img1/test-blur2.jpg">
Observer次のように画像パスを監視して変更したい：
<img class=”lazy” src="assets/img/test-blur2.jpg">
class=lazyつまり、 /img の後の「1」を含む画像を探して削除し、更新された画像を表示したいということです。
ヒントを事前にありがとう