← 返回首页

HTMLImageElement: loading プロパティ - Web API | MDN

Toggle sidebar

Theme

OS default
Light
Dark

日本語

Remember language Learn more

HTMLImageElement: loading プロパティ

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2022年3月.

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

In this article

値

文字列で、値は 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);
}

仕様書

Specification

HTML
# dom-img-loading

ブラウザーの互換性

Enable JavaScript to view this browser compatibility table.

関連情報

<img> 要素
ウェブパフォーマンス（MDN 学習領域）
遅延読み込み（MDN ウェブパフォーマンスガイド）

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 2026年4月8日 by MDN contributors.

View this page on GitHub • Report a problem with this content

HTML DOM API
HTMLImageElement
コンストラクター
1. Image()
インスタンスプロパティ
インスタンスメソッド
1. decode()
継承
HTML DOM に関連するページ
ガイド
1. JavaScript で queueMicrotask() によるマイクロタスクの使用
2. In depth: Microtasks and the JavaScript runtime environment