前端开发的时候，有些列表页面可能会有很多图片需要加载。一次加载太多图片，会占用很大的带宽，影响网页的加载速度。
这时候我们想到一种方式，让用户浏览到什么地方，就加载该处的图片。
这里写了一个简单的例子，大家可以去体验一下，当然这里考虑到的是最简单的情况。 这里简单的讲解一下这个例子里面的源码。
DOM 结构
由一个父容器div#lazy-img，里面是图片标签，父容器是可以滚动的，图片有固定高度。大家可以看到，容器内的img元素没有 src 属性，而有一个 data-src 属性。 这是不想让图片提前加载，所以把图片的链接储存到data-src 内。
div#lazy-img
img(data-src="https://file.diamondfsd.com/img/9c61bc16-ae02-4f06-a8aa-0501db51eadb.png")
img(data-src="https://file.diamondfsd.com/img/9c61bc16-ae02-4f06-a8aa-0501db51eadb.png")
img(data-src="https://file.diamondfsd.com/img/9c61bc16-ae02-4f06-a8aa-0501db51eadb.png")
img(data-src="https://file.diamondfsd.com/img/9c61bc16-ae02-4f06-a8aa-0501db51eadb.png")
img(data-src="https://file.diamondfsd.com/img/9c61bc16-ae02-4f06-a8aa-0501db51ea
最低0.47元/天 解锁文章
206
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
