HTMLMediaElement: thuộc tính loading

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Thuộc tính loading của giao diện HTMLMediaElement cung cấp gợi ý cho trình duyệt về cách xử lý việc tải phương tiện hiện ở bên 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 phương tiện 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ử <audio> hoặc thuộc tính nội dung loading của phần tử <video>.

function addVideoToList(url) {
  const list = document.querySelector("div.video-list");

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

  const newVideo = document.createElement("video");

  // Lazy-load if supported
  if ("loading" in HTMLVideoElement.prototype) {
    newVideo.loading = "lazy";
  } else {
    // If native lazy-loading is not supported you may want to consider
    // alternatives, though this may be fine as a progressive enhancement.
  }

  newVideo.width = 320;
  newVideo.height = 240;
  newVideo.src = url;

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