Home Original page

HTMLImageElement: loading property - Web APIs | MDN

Value

A string whose value is one of eager or lazy. For their meanings, see the HTML <img> reference.

Examples

The addImageToList() function shown below adds a photo thumbnail to a list of items, using lazy-loading to avoid loading the image from the network until it's actually needed.

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

Specifications

Specification
HTML
# dom-img-loading

Browser compatibility

See also

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.