HTMLImageElement: loading プロパティ

Baseline 広く利用可能

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

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

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);
}