HTMLImageElement.loading
HTMLImageElement
的 loading
属性为一个字符串,它的值会提示 用户代理 告诉浏览器不在可视视口内的图片该如何加载。这样一来,通过推迟图片加载仅让其在需要的时候加载而非页面初始载入时立刻加载,优化了页面的载入。
语法
let imageLoadScheduling = htmlImageElement.loading; htmlImageElement.loading = eagerOrLazy;
值
使用说明
load 事件的时机
load
事件在文档被完整的处理完成时触发。当图片使用立即加载 (默认值) 时,文档中的所有图片都会在 load
事件触发前载入。
当 loading
值设为 lazy
时,图片不再会在请求,下载,处理的时间内推迟 load
事件触发。
loading
属性值设为 lazy
但是在页面初次加载时就在可视视口内的图片会立即加载但它们也不会推迟 load
事件。换句话说,这些图片不会在处理 <img>
元素时立即加载,但仍会作为页面初始加载的一部分而加载。他们只是不会影响 load
事件。
这表明当 load
触发时,可视区域内懒加载的图片可能不可见。
防止元素在图片懒加载时出现移位
示例
下面展示的 addImageToList()
函数将一个照片缩略图添加到一个物品列表中,使用懒加载防止请求图片,直到其真正需要显示。
js
function addImageToList(url) {
const list = document.querySelector("div.photo-list");
let newItem = document.createElement("div");
newItem.className = "photo-item";
let newImg = document.createElement("img");
newImg.loading = "lazy";
newImg.width = 320;
newImg.height = 240;
newImg.src = url;
newItem.appendChild(newImg);
list.appendChild(newItem);
}
规范
Specification |
---|
HTML Standard # dom-img-loading |
浏览器兼容性
BCD tables only load in the browser