【Google Chrome 75】Lazy Load(遅延読み込み)をネイティブ実装へ

Google Chrome 75 「Lazy Load(遅延読み込み)」を実装

Google Chrome 75からついにLazy Load(遅延読み込み)がデフォルトで実装されるそうです。
※もうChrome 75になっていますが。

loading属性というものが追加されるので、そちらをimgタグに設定します。

<img src="example.jpg" alt="サンプル" loading="lazy">

のような記述になります。

imgタグだけではなくiframeにも適用されるので、その場合には、

<iframe src="example.html" loading="lazy" allowfullscreen></iframe>

となります。

loading属性で設定できるのは、3パターン

loading属性に設定できるのは、「lazy」「eager」「auto」の3パターンです。

lazy => 「遅延読み込み」を有効にする
eager => 「遅延読み込み」を無効にする
auto => 「遅延読み込み」するかどうかは、ブラウザが判断する

loading属性を設定していな場合、デフォルトでは「auto」が設定されます。

こちらのサイトで詳しく説明されていたので、そちらを参照して貰った方が、より詳細に分かると思います。
https://addyosmani.com/blog/lazy-loading/
※英語ページですが、私のような中学英語で止まっている人間でも分かるように詳しく書かれています。

0
この記事を書いている人
株式会社ディープ

名前ダッチ

メールアドレスadachi@deep-deep.jp

Twitterはこちら >>

  • コメント: 0

関連記事

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

最近の記事

  1. WP:WordPress(ワードプレス)
  2. WP:WordPress(ワードプレス)
  3. 文系と理系のメリットとデメリット
  4. 東京駅
  5. 残業
  6. プログラマーになるのに年齢は関係ある?
  7. 年収(収入)
  8. income(収入)
  9. プログラマーになろう
  10. オンライン学習支援サイト

Twitter

ダッチ@職業ブロガー兼プログラマー
@gatsu0000

アーカイブ

PAGE TOP