JavaScript实现图片懒加载的两种方式
更新时间：2024年04月19日 08:24:21 作者：挖稀泥的工人
现在的科技发达,图片的资源占比越来越大,对图片在页面的优化已经成为前端开发必备的技术之一,难的图片懒加载方法咱们看着头大,简单,易懂的才适合我们程序员,所以本文给大家介绍了JavaScript实现图片懒加载的两种方式,需要的朋友可以参考下
引言
现在的科技发达，图片的资源占比越来越大，对图片在页面的优化已经成为前端开发必备的技术之一，难的图片懒加载方法咱们看着头大，简单，易懂的才适合我们程序员。
很好，开始第一步将图片的标签放好，设定一个data-origin标签在img当中，这样使用data-的命名方式是为了与HTML5的自定义数据属性约定保持一致。
简单的方式
思路就是
- 先获取到可视区域，我们使用
clientHeight，它可以获取到html元素的客户端高度。 - 获取到带有
data-origin标签的全部img属性 - 获取每张图片相对视窗口的高度，使用
getBoundingClientRect，其中包含各种元素相对于视口的信息和元素本身的信息。 - 一旦图片相对于视窗顶部的距离小于可视区域高度，那就将
data-origin标签的url赋给src，最后清除data-origin标签。
<style>
img{
height: 300px;
width: 300px;
margin-bottom: 50px;
display: block;
}
</style>
</head>
<body>
<img src="" data-origin="https://t7.baidu.com/it/u=2604797219,1573897854&fm=193&f=GIF" alt="">
<img src="" data-origin="https://img1.baidu.com/it/u=435134468,1942448903&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=889" alt="">
<img src="" data-origin="https://img0.baidu.com/it/u=3628503530,464378779&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=800">
<img src="" data-origin="https://img2.baidu.com/it/u=855369075,175194576&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt="">
<img src="" data-origin="https://img2.baidu.com/it/u=2004708195,3393283717&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500" alt="">
<img src="" data-origin="https://img1.baidu.com/it/u=1331863463,2594844301&fm=253&fmt=auto?w=1067&h=800" alt="">
<img src="" data-origin="https://img1.baidu.com/it/u=1331863463,2594844301&fm=253&fmt=auto?w=1067&h=800" alt="">
<img src="" data-origin="https://img0.baidu.com/it/u=2788901948,3907873318&fm=253&fmt=auto?w=500&h=281" alt="">
<img src="" data-origin="https://img2.baidu.com/it/u=811993169,635123395&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889" alt="">
<img src="" data-origin="https://img0.baidu.com/it/u=924031950,2251460669&fm=253&fmt=auto&app=138&f=JPEG?w=1105&h=500" alt="">
<script>
//获取可视区域的高度 offsetHeight包含外部高度（边框）
const viewHeight = document.documentElement.clientHeight //window.innerHeight
// console.log(viewHeight);
function lazyLoad(){
const imgs = document.querySelectorAll('img[data-origin]') //属性选择
console.log(imgs);
imgs.forEach(item =>{
let res = item.getBoundingClientRect()
// console.log(res);
if(res.top < viewHeight){
item.src = item.dataset.origin
item.removeAttribute('data-origin')
}
})
// 获取可视区域的高度
// const viewHeight = document.documentElement.clientHeight
// const io = new IntersectionObserver(
// (entries) => {
// entries.forEach(entry => {
// if (entry.isIntersecting) {
// entry.target.src = entry.target.dataset.original || ''
// entry.target.removeAttribute('data-original')
// io.unobserve(entry.target)
// }
// })
// },
// {
// threshold: 0
// }
// )
// const imgs = document.querySelectorAll('img[data-original]')
// imgs.forEach(item => {
// io.observe(item)
// })
}
document.addEventListener('scroll',lazyLoad)
lazyLoad()
</script>
</body>
第二个方法
第二个方法就相对更复杂一些，通过判断某个元素和父元素交叉比例来判断是否需要懒加载。是异步监听的。当交叉比例达到某个值就会触发回调函数。我们这里使用的是IntersectionObserver方法，用一个外部box包裹所有图片，让图片超出box就滚动。看了上面的方法，这个方法也就明白在干什么了。
#box{
width: 100vw;
height: 100vh;
overflow: scroll;
}
img{
height: 300px;
margin-bottom: 50px;
display: block;
}
const viewHeight = document.documentElement.clientHeight
const io = new IntersectionObserver(
(entries) => {
entries.forEach(entry => {
//判断是否进入可视区
if (entry.isIntersecting) {
entry.target.src = entry.target.dataset.original || ''
//移除标签
entry.target.removeAttribute('data-original')
io.unobserve(entry.target)
}
})
},
{
取值范围从0~1，表示交叉比例
threshold: 0
}
)
//监听每一张图片
const imgs = document.querySelectorAll('img[data-original]')
imgs.forEach(item => {
io.observe(item)
})
到此这篇关于JavaScript实现图片懒加载的两种方式的文章就介绍到这了,更多相关JavaScript图片懒加载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了微信小程序实现视频播放器发送弹幕，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-04-04
近来无聊，翻出来大学时候的数据结构教材来看。突然想起，大学时候就想过用js实现基本的排序算法的事情，反正闲来无事，便写出来后记录于此2012-08-08
在项目中经常会用到动态加载js,下面这篇文章主要给大家介绍了关于js脚本加载失败问题的解决办法,文中通过实例代码介绍的非常详细,对大家学习或者使用js具有一定的参考学习价值,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了Javascript 绘制 sin 曲线过程,需要的朋友可以参考下2014-08-08
这篇文章主要介绍了JS动态修改iframe内嵌网页地址的方法,涉及javascript动态修改iframe中src属性的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-04-04![深入理解选择框脚本[推荐]](//img.jbzj.com/images/xgimg/bcimg5.png)
选择框是通过<select>和<option>元素创建的，又称为下拉列表框。为了方便与这个控件交互，除了所有表单字段共有的属性和方法外，javascript还提供了一些属性和方法。本文将详细介绍选择框脚本2016-12-12
函数执行拦截是JavaScript中强大的元编程技术,可以实现日志记录、性能监控、权限控制等功能,本文将深入探讨多种函数拦截方法,从基础到高级,帮助您全面掌握这一技术,需要的朋友可以参考下2025-06-06
这篇文章主要介绍了Bootstrap学习笔记之表单基本样式的相关资料,为大家分享了三种表单样式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要介绍了原生JS实现的简单轮播图功能,结合实例形式分析了基于javascript定时器控制页面元素动态变换实现轮播图的相关操作技巧,需要的朋友可以参考下2018-08-08
微信小程序开发是依托微信的,所以他的代码是嵌入在微信的原始代码之中的,这篇文章主要给大家介绍了关于微信小程序实现文字长按复制与一键复制功能的相关资料,需要的朋友可以参考下2023-03-03
![深入理解选择框脚本[推荐]](http://img.jbzj.com/images/xgimg/bcimg5.png)
最新评论