网页图片很多的情况下，为了提升网页加载速度，我们需要用到懒加载。即当用户浏览的页面滑动到该图片的时候才显示。否则给一个默认的不占用空间的图片站位。
如果有条件，可以提前在服务器端压缩对应图片，在页面初始化的时候显示对应图片的压缩版，以同时获得加载速度和用户体验。
1. 如何实现
我用到的是：lazyload-V2.0
官方文档很简单很容易上手，你一定能够理解。直接附上我的源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.js"></script>
</head>
<body>
<img class="lazyload" src="2.png" data-src="1.png" width="900" height="574"><br>
<img class="lazyload" src="2.png" data-src="1.png" width="900" height="574"><br>
<img class="lazyload" src="2.png" data-src="1.png" width="900" height="574"><br>
<img class="lazyload" src="2.png" data-src="1.png" width="900" height="574"><br>
<img class="lazyload" src="2.png" data-src="1.png" width="900" height="574"><br>
<img class="lazyload" src="2.png" data-src="1.png" width="900" height="574"><br>
<img class="lazyload" src="2.png" data-src="1.png" width="900" height="574"><br>
<img class="lazyload" src="2.png" data-src="1.png" width="900" height="574"><br>
<img class="lazyload" src="2.png" data-src="3.png" width="900" height="574"><br>
<img class="lazyload" src="2.png" data-src="1.png" width="900" height="574"><br>
</body>
<script>
lazyload();
</script>
</html>src就是默认的图片，data-src就是懒加载之后的图片。
demo里面放了10张图片，其中第9张图片是3.png，其他均为1.png。
2. 如何测试
在本地图片加载的速度很快，根本看不到懒加载的效果，如何在本地做测试呢？下面介绍两个方案：
1. F12打开Network，刚打开页面加载的文件资源如下截图：
向下滑动页面，直到第9张图片，发现3.png被加载：
2. 通过chrome的长截图功能
Chrome中F12，windows下Ctrl + Shift + P（macbook下⌘Command + ⇧Shift + P），然后输入：Capture full size screenshot，选中后在Network中发现3.png随之加载。截取的长图第9张图片也是3.png
393
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
