网页图片很多的情况下,为了提升网页加载速度,我们需要用到懒加载。即当用户浏览的页面滑动到该图片的时候才显示。否则给一个默认的不占用空间的图片站位。
如果有条件,可以提前在服务器端压缩对应图片,在页面初始化的时候显示对应图片的压缩版,以同时获得加载速度和用户体验。
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