为什么要实现懒加载?
原因:懒加载是一种网页性能优化的方式,它能极大的提升用户体验。现在图片清晰度越来越好,图片也越来也大,假使我搜图的时候服务器返回成百上千的图片,等浏览器加载完成可能需要的时间是难以把控的,而且用户只能对着转圈圈的网页抓狂。所以,我们需要懒加载,进入页面的时候,只请求可视区域的图片资源,等待用户进一步的操作的时候再去加载后面的图片。
实现方法:
1、监听 scroll 事件判断元素是否进入视口
//将获取到的数据塞到data-src中,等带滚动到当前窗口时候赋给src属性渲染展示
<img data-src="/img/001.png" src="/" alt="xxx" />
<img data-src="/img/002.png" src="/" alt="xxx" />
<img data-src="/img/003.png" src="/" alt="xxx" />
//获取全部img标签
var images = document.getElementsByTagName("img");
window.addEventListener("scroll", (e) => {
//当发生滚动事件时调用loadImg事件
loadImg();
});
function loadImg() {
// 遍历每一张图
for (let i of images) {
/*getBoundingClientRect().top 为元素相对于窗口的位置;window.innerHeight 为当前窗口的高度;
当元素对于窗口的位置小于当前窗口的高度时,那自然处于了窗口可视区了。*/
if (i.getBoundingClientRect().top < window.innerHeight) {
//获取自定义data-src属性的值
let trueSrc = i.getAttribute("data-src");
//把值赋值给图片的src属性
i.setAttribute("src", trueSrc);
}
}
}
//进入页面时候先执行一次
loadImg();
2、IntersectionObserver
Intersection Observer API提供了一种异步观察目标元素与祖先元素或顶级文档viewport的交集中的变化的方法。
创建一个 IntersectionObserver对象,并传入相应参数和回调用函数,该回调函数将会在目标(target)元素和根(root)元素的交集大小超过阈值(threshold)规定的大小时候被执行。
var observer = new IntersectionObserver(callback, options);
//获取页面上img标签集合
var images = document.getElementsByTagName("img");
//定义回调函数
function callback(entries) {
for (let i of entries) {
//如果当前元素出现在窗口
if (i.isIntersecting) {
let img = i.target;
//将图片地址给到src属性
let trueSrc = img.getAttribute("data-src");
img.setAttribute("src", trueSrc);
//取消对当前元素的的观察
observer.unobserve(img);
}
}
}
//对图片循环添加观察
for (let i of images) {
observer.observe(i);
}