Ng-lazyload-image: Lazyloadとsrcset

やあ、

このライブラリは残念ながらsrcsetをサポートしていませんが、サポートする必要があります。 これは非常に重要な機能です。

そうは言っても、ブラウザと同じ方法でsrcsetを解析して理解する必要があるため、サポートは非​​常に簡単ではありません。

オプション1：

srcsetを特殊なケースとして扱い、画像をバックグラウンドで読み込もうとはしませんが、代わりに、画像がビューポートの場合にsrcsetを設定します。
次のhtmlタグがあるとしましょう。
<img [defaultImage]="defaultImage" lazyLoad="small.jpg 300w, large.jpg 500w">
画像がビューポートにあるとき、 srcsetを見て、 lazyLoadにsrcset文字列が含まれていることを検出し、タグを次のように変換します。
<img srcset="small.jpg 300w, large.jpg 500w">

プロ：
簡単な実装
短所：
ユーザーには「defaultImage」は表示されません。
画像の読み込み中にネットワークエラーを処理することはできません。

オプション2：

srcsetを解析し、最適なオプションを選択します（ブラウザーが実行すべきだったと思うように）。
次のhtmlタグがあるとしましょう。
<img [defaultImage]="defaultImage" lazyLoad="small.jpg 300w, large.jpg 500w">
lazyLoadにsrcsetが含まれていることを検出し、文字列を次のように解析します。
[ { url: 'small.jpg', width: 300 }, { url: 'large.jpg', width: 500 } ]
それをブラウザの幅（およびデバイスのピクセル比）と比較して、最適な画像を選択します。 画像をバックグラウンドで読み込みます。画像が読み込まれると、 srcsetを設定するだけで、画像はキャッシュにあるため、すぐに読み込まれます。

プロ：
画像はレイジーロードされます🎉
ユーザーにはデフォルトの画像が表示されます。
ネットワークエラーを処理できます（ srcsetから他のイメージをロードしようとする必要がありますか、それとも
短所：
ブラウザが行うべき方法と同じ方法で文字列を解析することは常に注意が必要です。 エッジのユースケースを見逃す可能性があります。
私の理解では、ブラウザはキャッシュに保存されている場合、常に最大の画像を使用します。 画像がすでに読み込まれているかどうかを知る方法がないため、最適な画像を読み込む必要があります（ただし、 srcsetを設定すると、最大の画像が表示されます）。 たとえば、次のsrcset small.jpg 300w, large.jpg 500wあり、画面が500 px未満であるが、 large.jpgがすでにロードされているとします。 私の理解では、ブラウザはキャッシュ内にあるのでlarge.jpgをピケッティングする必要がありましたが、 small.jpgをロードするかどうかわからないため、ロード時にsrcsetを設定します。 large.jpg （ただし、間違っている可能性があります）。 つまり、不必要に画像をロードしました。

結論：

オプション2は実行可能であり（それほど難しくないはずです）、実行する必要があると思います。 私の時間は今はかなり限られていますが、私は喜んでPRを受け入れます:)

こんにちは@tjoskar 、迅速な返信をありがとう、私は2番目のオプションが実行可能である可能性があることに同意します。 また、締め切りが迫っているため、今はあまり時間がありませんが、時間があればすぐにこの機能に貢献したいと思います。特に、ライブラリの動作を拡張して遅延をサポートしていることを考慮します。 hlink.hrefプロパティを使用した画像タグの読み込み:)

または、デフォルトのブラウザsrcsetオプションを無視して、独自の意思決定プロセスとして実装し、時間をかけて調整して、可能な限り最適なものにします:)

スペック

仕様を順守するだけで、仕様は非常に簡単だと思います。

しかし、あなたが指摘したように、ブラウザの実装はここで達成したいことを壊す可能性があるので、それはバイパスされるべきだと私は信じています。

レスポンシブイメージのサポートを両方に追加するプルリクエスト（＃231）を送信しました\ ご意見をお待ちしております。

これは3.4.0含まれています。 ありがとう@sapierens