JavaScript实现图片懒加载的方法分析
本文实例讲述了JavaScript实现图片懒加载的方法。分享给大家供大家参考,具体如下:
懒加载是非常实用的提升网页性能的方式,当访问一个页面的时候,只显示可视区域内的图片,其它的图片只有出现在可视区域内的时候才会被请求加载。
我们现在用原生的js实现简单的图片懒加载,主要利用的原理就是先不给设置src,而是把图片的路径放在data-src中,等待图片被加载的时候将路径取出放到src中。
HTML代码
本文实例讲述了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程序设计有所帮助。