图片懒加载 loading

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"/>