懒加载(LazyLoad)是前端优化的一种有效方式,极大的提升用户体验,图片一直是页面加载的流浪大户,现在一张图片几兆已经是很正常的事,远远大于代码的大小。倘若一次ajax请求过来10张图片的地址,我想如果你一次性把10张图片都加载出来,肯定是不合理的。
第一:会显示的很慢,多加载1秒都会引起用户的流失,这对靠流量的网站来说绝对是噩梦。
第二:用户如果只是随便看看,没想全部看,这无疑是浪费了用户很多流量。
什么是懒加载
在图片非常多的应用场景,为了提高页面加载速度,改善用户体验,我们对未出现在视野范围内的图片先不进行加载,等到出现在视野范围才去加载。
懒加载的实现原理
原理很简单,先把img的src指向空或者一个小图片,图片真实的地址存储在img一个自定义的属性里,< img src=”” data-src=”http://real.com/real.jpg” />,等到此图片出现在视野范围内了,获取img元素,把data-src里的值赋给src。
判断方法一
- 通过
document.documentElement.clientHeight
获取屏幕可视窗口高度 - 通过
element.offsetTop
获取元素相对于文档顶部的距离 - 通过
document.documentElement.scrollTop
获取浏览器窗口顶部与文档顶部之间的距离,也就是滚动条滚动的距离
然后判断②-③<①是否成立,如果成立,元素就在可视区域内。
方法二(推荐)
通过getBoundingClientRect()
方法来获取元素的大小以及位置,MDN上是这样描述的:
The Element.getBoundingClientRect() method returns the size of an element and its position relative to the viewport.
这个方法返回一个名为ClientRect
的DOMRect
对象,包含了top
、right
、botton
、left
、width
、height
这些值。
可以看出返回的元素位置是相对于左上角而言的,而不是边距。
我们思考一下,什么情况下图片进入可视区域。
假设const bound = el.getBoundingClientRect();
来表示图片到可视区域顶部距离;
并设 const clientHeight = window.innerHeight;
来表示可视区域的高度。
随着滚动条的向下滚动,bound.top
会越来越小,也就是图片到可视区域顶部的距离越来越小,当bound.top===clientHeight
时,图片的上沿应该是位于可视区域下沿的位置的临界点,再滚动一点点,图片就会进入可视区域。
也就是说,在bound.top<=clientHeight
时,图片是在可视区域内的。
我们这样判断:
function isInSight(el) {
const bound = el.getBoundingClientRect();
const clientHeight = window.innerHeight;
//如果只考虑向下滚动加载
//const clientWidth = window.innerWeight;
return bound.top <= clientHeight + 100;
}
这里有个+100是为了提前加载。
经提醒。。这个方法性能
滚动加载和函数节流