1. ウェブ
  2. Web API
  3. HTMLImageElement
  4. loading

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

HTMLImageElement: loading プロパティ

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2022年3月以降、すべてのブラウザーで利用可能です。

HTMLImageElement の loading プロパティは、現在のウィンドウの視覚ビューポートの外にある画像の読み込みをどのように処理するかのヒントをブラウザーに提供するものです。これは、最初のページ読み込み時にすぐに画像を読み込むのではなく、必要と予想されるまで画像の読み込みを延期することで、文書のコンテンツの読み込みを最適化するのに役立ちます。これは <img> 要素の loading コンテンツ属性に対応しています。

値

文字列で、値は eager または lazy のいずれかです。それぞれの意味については、HTML <img> リファレンスを参照してください。

例

基本的な使い方

以下に示す addImageToList() 関数は、実際に必要になるまでネットワークから画像を読み込まないように遅延読み込みを使用して、写真のサムネイルをアイテムのリストに追加するものです。

js
function addImageToList(url) {
  const list = document.querySelector("div.photo-list");

  const newItem = document.createElement("div");
  newItem.className = "photo-item";

  const newImg = document.createElement("img");
  newImg.loading = "lazy";
  newImg.width = 320;
  newImg.height = 240;
  newImg.src = url;

  newItem.appendChild(newImg);
  list.appendChild(newItem);
}

仕様書

仕様書
HTML
# dom-img-loading

ブラウザーの互換性

関連情報

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告