web-dev-qa-db-ja.com

srcsetを使用して画像を遅延読み込みするにはどうすればよいですか？

カルーセルを作成するために slick.js を使用しています。ただし、属性をsrcからdata-lazyに変更しても、その画像にスクロールする前に画像が読み込まれます。画像にsrcsetタグが含まれているためだと思います。私の質問は、ブラウザがレスポンシブ画像を読み込まないようにする方法、またはレスポンシブ画像の遅延読み込みを適切に行う方法です。

これは私のimgタグのサンプルです

<img data-lazy="better_me.jpg" srcset="better_me.jpg 400w, better_me.jpg 200w" class="avatar photo avatar-200" alt="better_me" width="200" height="200" sizes="(min-device-resolution: 1.6) 400px, 200px">
javascriptjqueryhtmlcssslick.js
9
toy

lazySizes は正常に機能しています。ただし、マークアップをこのようなものに変更する必要があります。

<img data-src="better_me.jpg" data-srcset="better_me2.jpg 400w, better_me.jpg 200w" class="avatar photo avatar-200 lazyload" data-sizes="auto" alt="better_me" width="200" height="200" />

注srcsetはdata-srcsetに変更され、data-lazyはdata-srcに変更されます。さらに、クラスlazyloadを追加する必要があります。

sizes属性はあまり意味がありませんでした。代わりにx記述子を使用したいですか？または単にsizes="200px"を使用しますか？知りません。 data-sizes="auto"に切り替えただけなので、自動的に計算されます。 （ただし、その場合、画像をロードする前に画像の寸法を計算できる必要があります。）

lazySizesは確かに、画像が表示される前に画像を読み込みます。これは、ユーザーエクスペリエンスの大きな改善です。何かをスクロールして表示するユーザーは、そのときは待ちたくありません。画像が既に表示された後に画像のダウンロードを開始するレイジーローダーは、ユーザーエクスペリエンスを混乱させます。

LazySizesの優れた点の1つは、この遅延ローダーがブラウザーが現在大量にダウンロードしているかどうかを確認し、ビューイメージでのみダウンロードするか、ニアビューイメージをプリロードするかを決定することです。

ただし、これが必要ない場合は、lazySizesのexpandおよびexpFactorオプションを設定することでこれを制御できます。

11
alexander farkas

私は responselyLazy をお勧めします。実装はSEOに対応しており、HTMLコードを混乱させることはありません。スニペットは次のとおりです。

<div class="responsively-lazy" style="padding-bottom:68.44%;">
<img
    alt=""
    src="images/2500.jpg"
    srcset="data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
    data-srcset="images/400.jpg 400w, images/600.jpg 600w, images/800.jpg 800w, images/1000.jpg 1000w, images/1500.jpg 1500w, images/2000.jpg 2000w"
/>

ご覧のとおり、src属性の値は変更されていません。

詳細については、 http://ivopetkov.com/b/lazy-load-responsive-images/ をご覧ください。

2
Ivo Petkov