图片懒加载
图片懒加载其实就是延迟加载,浏览器可视范围有限。
1)事件监听,监听scroll这个事件,鼠标滚动就触发。
window.innerHeight窗口显示区高度
getBoundingClientRect().top 图片到视窗上边的距离
const images=document.querySelectorAaa('img');
window.addEventLister('scroll',e=>{
images.forEach(img=>{
const imageTop=img.getBoundingClientRect().top;
if(imageTop<window.innerHeight){
const data_src=image.getAttribute('data-src')
image.setAttribute('src',data_src)
}
})
})
data-,浏览器碰到这个属性不会像默认属性那样进行属性处理的将src属性改为data-src属性,这样相当于不知道要在哪里下载这些图片了
页面加载很多内容就会导致任务的堆积,而且即使图片已经加载了还是会不断触发事件
2) intersectionObserver
intersectionObserver是浏览器提供的构造函数,目标元素和可视窗口会产生交叉区域
const images=document.querySelectorAaa('img');
const callback=entries=>{
entries.forEach(entry=>{
if(entry.isIntersecting){//是否在可视区域
const image=entry.target;
const data_src=image.getAttribute('data-src');
image.setAttribute('src',data_src);
observer.unobserve('image');
console.log()
}
})
}
const observer=new IntersectionObserver(callback);
image.forEach(image=>{
observer.observe(image);
})