[HTML]Imgタグ

Img Tag

画像タグの既定のプロパティ

の内容を含まない空のラベルを使用すると、意味のない

が使用されます.

コンテンツにコンテンツを追加するために使用されます(?)中のタグではなく、インポートする画像を定義するタグ

srcプロパティにパスを書き込むと、そのパスのイメージリソースが要求され、インポートされます.この場合、パスは絶対パス、相対パスと書くことができます.[絶対パス](Absolute Path)リソースを絶対パスのパスに要求し、そのHTMLファイルの場所に基づいて絶対パスのファイルを検索します.したがって、相対パスは、対応するhtmlファイルの場所の影響を受けます.

altプロパティは必須ではありませんが、スクリーンリーダーなどのプロパティを使用すると、実際に画像が見えない人にどのような画像なのかを伝えるプロパティです.また、画像のロードに失敗した場合、altの画像説明が画面に出力されます.
** alternative text(alt)

title属性を書いた後、マウスを離すとtitle内容が

と表示されます.

cssを与えることができますが、height、widthプロパティを別途与えることができます.

画像+lazy loading設定のロードについて

イメージは、サーバから要求されて受信されるため、イメージを受信する際にコストが発生し、容量が小さくないため、ロード時間が遅れることもあります.

の場合、これらのパフォーマンスとコストの問題を解決する方法がありますか?画像をロードしないわけにもいかないし...?

その答えはlazy loadです.
不活性ロードとは:例
:lazyは勤勉な反対で、怠惰の意味で、直訳すると怠惰なロード、つまり、ロードを最大限に延期します.ロードをできるだけ遅らせる?言い換えれば、例えば、私がアクセスするウェブサイトに数百個の画像(正確には、画像ラベル)があると仮定します.しかし、私が今日このサイトで使っている部分は、せいぜい上のnavbarclickです.加えて、私はこれらの画像が見えません.これは長い間スクロールしてから画像があるサイトです.この場合、このサイトの画像は表示されませんが、画像を要求するコストや、初期レンダリング時にリソースを要求する遅延など、パフォーマンスの問題を負わなければなりません.しかし、lazy-loading、つまり、イメージのロードを最大限遅らせたら?すなわち、画像の位置までスクロールし、画像を明確に表示する目的でロードした場合?=>効率が向上します.このようにlazy loadingは、最初のロード時に無条件に画像をロードするのではなく、スクロールまたはユーザインタラクションによってある時点に到達する、すなわち、画像を明確に表示する時点で画像をロードする.さっきの私のようにこのページでnavbarを使うだけなら、画像をロードする必要はありません.この点の利点は、パフォーマンスの向上とコストの削減です.

であれば、どのように実施すればいいですか?
1)まず,最も簡単な方法はGoogle Chromeがサポートするネイティブ不活性ロードを用いることである.非常に簡単な方法です<img src="" loading="lazy"/>これでいいです.それでは自分でこの写真を見てビューポートに着いた時にロードできますもう1つのオプションはloading=「earch」オプションで、すぐに画像がロードされます.つまり、Lazy Lodingを使用しないことを選択することができます.ただし、すべてのブラウザがサポートしているわけではありません.実際には、ブラウザ固有の互換性または機能サポート情報を提供するサイトでcan i useを確認しました.

互換性がかなり悪いことがわかります.

2)他の方法は?実際にしか現れない.たとえば、jsイベントハンドルを使用してスクロールイベントを作成し、スクロールがある場所に到達した場合、画像のロードを許可する方法を使用します.この場合、imgラベルにsrcプロパティを書き込むのではなく、data-srcプロパティを書き込む必要があります.src属性を書くと必ず直接ロードします!あるいは、周知の交差点observer APIにより、前述したスクロールイベントのように、ユーザのスクロールインタラクションに基づいて画像をロードするロジックを設定することができる.
**週末の交差点観察者またはスクロールイベントハンドラによる上記機能の実現(参考になるブログ)