让我们向您解释js如何实现图片的惰性加载。相信朋友们也应该密切关注这个话题。现在，我们来谈谈js如何为朋友实现图片的懒加载。边肖还收集了js如何实现图片懒加载的相关信息。我希望你看到后会喜欢。
这篇文章详细介绍了js的偷懒加载图片的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
偷懒加载图片是前端优化必须掌握的东西。偷懒加载图片可以节省带宽，减少我们网页的负载。接下来我会记录下我掌握的偷懒加载图片的方法。首先，实现它的一种方法是，首先加载视图窗口中我们图片的图片src，但是如果它不在尝试窗口中，它就不会加载src，并且会加载我们滚动条的滑块。
下去装货
我的做法是用weapi，相对简单。检测服务器(官网检测服务器)我们直接进入代码。
差异
img data-src=' https://ss0 . BD static.com/70 cfvhsh _ q1ynxgkpowk1hf 6 hy/it/u=3225163326，3627210682fm=26gp=0.jpg '
img data-src=' https://ss2 . BD static.com/70 cfvnsh _ q1ynxgkpowk1hf 6 hy/it/u=3228549874，2173006364fm=26gp=0.jpg '
img data-src=' https://ss0 . BD static.com/70 cfuhsh _ q1ynxgkpowk1hf 6 hy/it/u=1246451335，909670857fm=26gp=0.jpg '
img data-src=' https://ss2 . BD static.com/70 cfvnsh _ q1ynxgkpowk1hf 6 hy/it/u=3609981743，3469269943fm=26gp=0.jpg '
img data-src=' https://ss0 . BD static.com/70 cfvhsh _ q1ynxgkpowk1hf 6 hy/it/u=3225163326，3627210682fm=26gp=0.jpg '
img data-src=' https://ss2 . BD static.com/70 cfvnsh _ q1ynxgkpowk1hf 6 hy/it/u=3228549874，2173006364fm=26gp=0.jpg '
img data-src=' https://ss0 . BD static.com/70 cfuhsh _ q1ynxgkpowk1hf 6 hy/it/u=1246451335，909670857fm=26gp=0.jpg '
img data-src=' https://ss2 . BD static.com/70 cfvnsh _ q1ynxgkpowk1hf 6 hy/it/u=3609981743，3469269943fm=26gp=0.jpg '
/divjs部分
//获取所有图片的数组
const imgs=[.document . getelementsbytagname(' img ')]
//IntersectionObserver
if(intersectionbserver){ 0
让lazyloadObser=new intersectionbserver((条目，观察者)=}
entries.forEach((条目，索引)={ 0
让lazyImage=entry.target
if(entry . intersectionratio 0){ 0
lazy mage . src=lazy mage . GetAttribute(' data-src ')；
lazyloadobser . unobserve(LazyMage)
}
})
})
for(设I=0；i imgs.lengthI){ 0
lazyloadObser.observe(imgs[i])
}
}【推荐学习：高级javascript教程】以上就是js如何实现图片懒加载的细节。请多关注php中文网站的其他相关文章！
来源：php中文网站
标签：
免责声明：本文由用户上传，与本网站立场无关。财经信息仅供读者参考，并不构成投资建议。投资者据此操作，风险自担。 如有侵权请联系删除！