HTMLImageElement: loading property

Baseline Widely available

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

Thuộc tính loading của giao diện HTMLImageElement cung cấp gợi ý cho trình duyệt về cách xử lý việc tải hình ảnh hiện nằm ngoài visual viewport của cửa sổ. Điều này giúp tối ưu hóa việc tải nội dung của tài liệu bằng cách trì hoãn tải hình ảnh cho đến khi cần đến nó, thay vì ngay lập tức trong quá trình tải trang ban đầu. Nó phản ánh thuộc tính nội dung loading của phần tử <img>.

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