【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/
※英語ページですが、私のような中学英語で止まっている人間でも分かるように詳しく書かれています。

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

名前ダッチ

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

Twitterはこちら >>

関連記事

最近の記事

  1. レンタルサーバ:おすすめの共用サーバ
  2. アフィリエイト
  3. VPSサーバー
  4. ブログのネタ探し
  5. プログラミング
  6. SSLとは
  7. 常時SSL通信設定後にやっておくべきこと
  8. 常時SSL通信設定方法
  9. htaccessとは
  10. WordPress

Twitter

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

  • リモートやってみて分かったこと。 会社って意外と仕事に集中できていなかった。 当たり前か。会社って、別に落ち着ける空間じゃないですからね。
    about 2日 ago via Twitter Web App

アーカイブ

PAGE TOP