图片懒加载 loading

发布时间 2023-07-06 16:42:29作者: 红苹果学园
loading属性设置为lazy   

到今天,除了 IE 系列浏览器,目前都支持通过 loading 属性实现延迟加载。此属性可以添加到 < img > 元素中,也可以添加到 < iframe > 元素中。

属性的值为 loading=lazy 会告诉浏览器,如果图像位于可视区时,则立即加载图像,并在用户滚动到它们附近时获取其他图像。

<img :src="item.src" alt="" loading="lazy"/>
 
 
使用 decoding=async 实现图片的异步解码,浏览器便会异步解码图像,加快显示其他内容。这是图片优化方案中可选的一环
<img :src="item.src" alt="" loading="lazy" decoding="async"/>