图片的懒加载是前端优化必须要掌握的东西，图片实现懒加载可以节省带宽又可以减轻我们网页的负荷。接下来我来记录一下我所掌握的图片懒加载的方法。首先它实现的一种方式就是我们的图片在视图窗口范围内的图片src先加载出来但是不在试图窗口内的他是不会加载src的随着我们的滚动条的下滑会随之加载。
下来加载
我实现的方式是利用weapi的方式这样比较简单。instersectionobserver(官网instersectionobserver)。
我们直接上代码吧
<div> <img data-src="https://ss0.bdstatic.com/70cfvhsh_q1ynxgkpowk1hf6hhy/it/u=3225163326,3627210682&fm=26&gp=0.jpg"> <img data-src="https://ss2.bdstatic.com/70cfvnsh_q1ynxgkpowk1hf6hhy/it/u=3228549874,2173006364&fm=26&gp=0.jpg"> <img data-src="https://ss0.bdstatic.com/70cfuhsh_q1ynxgkpowk1hf6hhy/it/u=1246451335,909670857&fm=26&gp=0.jpg"> <img data-src="https://ss2.bdstatic.com/70cfvnsh_q1ynxgkpowk1hf6hhy/it/u=3609981743,3469269943&fm=26&gp=0.jpg"> <img data-src="https://ss0.bdstatic.com/70cfvhsh_q1ynxgkpowk1hf6hhy/it/u=3225163326,3627210682&fm=26&gp=0.jpg"> <img data-src="https://ss2.bdstatic.com/70cfvnsh_q1ynxgkpowk1hf6hhy/it/u=3228549874,2173006364&fm=26&gp=0.jpg"> <img data-src="https://ss0.bdstatic.com/70cfuhsh_q1ynxgkpowk1hf6hhy/it/u=1246451335,909670857&fm=26&gp=0.jpg"> <img data-src="https://ss2.bdstatic.com/70cfvnsh_q1ynxgkpowk1hf6hhy/it/u=3609981743,3469269943&fm=26&gp=0.jpg"> </div>
js部分
//获取全部图片的数组const imgs = [...document.getelementsbytagname('img')] // intersectionobserver if(intersectionobserver){ let lazyloadobser = new intersectionobserver((entries,observer)=>{ entries.foreach((entry,index) =>{ let lazyimage = entry.target if(entry.intersectionratio>0){ lazyimage.src = lazyimage.getattribute('data-src'); lazyloadobser.unobserve(lazyimage) } }) }) for(let i = 0; i < imgs.length;i++){ lazyloadobser.observe(imgs[i]) } }
【推荐学习：javascript高级教程】
以上就是js如何实现图片的懒加载的详细内容。