图片懒加载
(1)什么是懒加载
当打开一个有很多图片的页面时,先只加载页面上看到的图片,等滚动到页面下面时,再加载所需的图片,这就是图片懒加载
(2)懒加载的作用
减少或延迟请求数,缓解浏览器的压力,增强用户体验
(3)懒加载的实现方法
1.设置图片src属性为同一张图片,同时自定义一个data-src属性来存储图片的真实地址
2.页面初始化显示的时候或者浏览器发生滚动的时候判断图片是否在可视范围内
3.当页面在可视范围内时,通过js自动改变该区域的图片的src属性为真实地址
`
1.document.documentElement.clientHeight获取屏幕可视窗口大小;
2.document.documentElement.scrollTop获取浏览器窗口顶部与文档顶部之间的距离