[HTML]Imgタグ
Img Tag
画像タグの既定のプロパティ
** alternative text(alt)
不活性ロードとは:例
:lazyは勤勉な反対で、怠惰の意味で、直訳すると怠惰なロード、つまり、ロードを最大限に延期します.ロードをできるだけ遅らせる?言い換えれば、例えば、私がアクセスするウェブサイトに数百個の画像(正確には、画像ラベル)があると仮定します.しかし、私が今日このサイトで使っている部分は、せいぜい上のnavbarclickです.加えて、私はこれらの画像が見えません.これは長い間スクロールしてから画像があるサイトです.この場合、このサイトの画像は表示されませんが、画像を要求するコストや、初期レンダリング時にリソースを要求する遅延など、パフォーマンスの問題を負わなければなりません.しかし、lazy-loading、つまり、イメージのロードを最大限遅らせたら?すなわち、画像の位置までスクロールし、画像を明確に表示する目的でロードした場合?=>効率が向上します.このようにlazy loadingは、最初のロード時に無条件に画像をロードするのではなく、スクロールまたはユーザインタラクションによってある時点に到達する、すなわち、画像を明確に表示する時点で画像をロードする.さっきの私のようにこのページでnavbarを使うだけなら、画像をロードする必要はありません.この点の利点は、パフォーマンスの向上とコストの削減です.
1)まず,最も簡単な方法はGoogle Chromeがサポートするネイティブ不活性ロードを用いることである.非常に簡単な方法です
<img src="" loading="lazy"/>
これでいいです.それでは自分でこの写真を見てビューポートに着いた時にロードできますもう1つのオプションはloading=「earch」オプションで、すぐに画像がロードされます.つまり、Lazy Lodingを使用しないことを選択することができます.ただし、すべてのブラウザがサポートしているわけではありません.実際には、ブラウザ固有の互換性または機能サポート情報を提供するサイトでcan i useを確認しました.互換性がかなり悪いことがわかります.
**週末の交差点観察者またはスクロールイベントハンドラによる上記機能の実現(参考になるブログ)
Reference
この問題について([HTML]Imgタグ), 我々は、より多くの情報をここで見つけました https://velog.io/@0715yk/HTML-Img-태그テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol