微客导航 » 文章资讯 » JavaScript实现图片懒加载的方法分析

JavaScript实现图片懒加载的方法分析

2023-09-10 18:05:05 304

本文实例讲述了JavaScript实现图片懒加载的方法。分享给大家供大家参考，具体如下：

懒加载是非常实用的提升网页性能的方式，当访问一个页面的时候，只显示可视区域内的图片，其它的图片只有出现在可视区域内的时候才会被请求加载。

我们现在用原生的js实现简单的图片懒加载，主要利用的原理就是先不给设置src，而是把图片的路径放在data-src中，等待图片被加载的时候将路径取出放到src中。

HTML代码

判断元素是否在可视区域

方法一：

1.获取屏幕可视区高度：document.documentElement.clientHeight
2.获取元素距顶部的高度：element.offsetTop
3.获取滚动高度：document.documentElement.scrollTop
4.若满足：2-3<1,那么元素就出现在可视区域

方法二：

1.获取元素到可视区域顶部的距离：varbound=element.getBoundingClientRect()
2.获取可视区域的高度：window.innerHeight
3.若满足bound.top<=window.innerHeight,那么元素就出现在可视区域

方法三：

利用IntersectionObserver函数自动观察元素是否在可视区域内

varwatch=newIntersectionObserver(callback,option);
//开始观察
watch.observe(el);
//停止观察
watch.unobserve(el);
//关闭观察器
watch.disconnect();

js代码

第一种很多人都用过，所以我们就用第二种写一下

//判断图片是否出现在可视区域内
functionisInSight(el){
constbound=el.getBoundingClientRect();
constclientHeight=window.innerHeight;
returnbound.top<=clientHeight+100;
}
//加载图片
letindex=0;
functioncheckImgs(){
constimgs=document.querySelectorAll('.my-photo');
for(leti=index;i=mustRun){
fn.apply(context,args);
previous=now;
}
}
}
//调用函数
window.onload=checkImgs;
window.onscroll=throttle(checkImgs);

我们在用第三种方法写一个demo

functioncheckImgs(){
constimgs=Array.from(document.querySelectorAll(".my-photo"));
imgs.forEach(item=>io.observe(item));
}
functionloadImg(el){
if(!el.src){
constsource=el.dataset.src;
el.src=source;
}
}
constio=newIntersectionObserver(ioes=>{
ioes.forEach(ioe=>{
constel=ioe.target;
constintersectionRatio=ioe.intersectionRatio;
if(intersectionRatio>0&&intersectionRatio<=1){
loadImg(el);
}
el.onload=el.onerror=()=>io.unobserve(el);
});
});

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript图片操作技巧大全》、《JavaScript运动效果与技巧汇总》、《JavaScript切换特效与技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

返回顶部
3162201930
czq8825@qq.com

JavaScript实现图片懒加载的方法分析

热门推荐

随机推荐