本文摘自PHP中文网,作者醉折花枝作酒筹,侵删。
本篇文章给大家详细介绍一下js实现图片的懒加载的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。图片的懒加载是前端优化必须要掌握的东西,图片实现懒加载可以节省带宽又可以减轻我们网页的负荷。接下来我来记录一下我所掌握的图片懒加载的方法。首先它实现的一种方式就是我们的图片在视图窗口范围内的图片src先加载出来但是不在试图窗口内的他是不会加载src的随着我们的滚动条的下滑会随之加载。
下来加载
我实现的方式是利用weapi的方式这样比较简单。InstersectionObserver(官网InstersectionObserver)。
我们直接上代码吧
1 2 3 4 5 6 7 8 9 10 | <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部分
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | const imgs = [...document.getElementsByTagName( 'img' )]
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如何实现图片的懒加载的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
实例汇总js call()及apply()的方法使用
js正则表达式之限1-2位整数或者至多含有两位小数的写法
老司机带你彻底搞懂js闭包各种坑
js 实现全选和全不选代码示例
js写后端用什么框架
javascript时间戳如何转化为日期
如何利用js实现水平移动与垂直移动效果
简析如何用js实现简单轮播
介绍js实现五子棋界面设计
js怎么获取标签的值?
更多相关阅读请进入《js》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » js如何实现图片的懒加载