关于图片懒加载
图片懒加载是一种优化网页性能的技术,它延迟加载页面中的图片,只在用户需要时才进行加载,从而减少初始页面加载时的资源请求和传输量。
lazysizes 让该技术成为非常简单的实现策略。
在项目中使用 lazysizes
1、安装
npm install lazysizes --save
2、引入
import "lazysizes";
import "lazysizes/plugins/parent-fit/ls.parent-fit";
处理需要延迟加载的 Image 标签
- 将
lazyload
类添加到需要延迟加载的图片中 - 将
src
属性改为data-src
为什么将
src
属性更改为data-src
?如果不更改属性,所有图片将立即加载,而不是延迟加载。
使用data-src
不是浏览器识别的属性,浏览器遇到具有该属性的图片标签时不会加载图片。
这样做的好处是让lazysizes
脚本决定何时加载图像,而不是由浏览器决定。
<img data-src="images.png" class="lazyload" />
怎样才算添加成功?
- 滚动页面,打开控制台审查元素,找到添加了
lazyload
属性的图片,它们的类应该从 lazyload 改变为 lazyloaded。 - 查看 Network 面板,点击 Img,当向下滚动时可以看到图片逐个加载。