如何实现WEB端图片懒加载!

前端HTML代码

<div class=”img_box”>
<!– 加载 loading 图片是在 html 部分实现 –>
<!– src 存放的是伪图片,等待图片 –>
<!– data-src 是自定属性,存放真是的图片地址 –>
<img src=”/img/loading02.gif” data-src=”/img/01.jpg” alt=””>
<img src=”/img/loading02.gif” data-src=”/img/02.jpg” alt=””>
<img src=”/img/loading02.gif” data-src=”/img/03.jpg” alt=””>
<img src=”/img/loading02.gif” data-src=”/img/04.jpg” alt=””>
<img src=”/img/loading02.gif” data-src=”/img/05.jpg” alt=””>
<img src=”/img/loading02.gif” data-src=”/img/06.jpg” alt=””>
<img src=”/img/loading02.gif” data-src=”/img/07.jpg” alt=””>
<img src=”/img/loading02.gif” data-src=”/img/08.jpg” alt=””>
<img src=”/img/loading02.gif” data-src=”/img/09.jpg” alt=””>
</div>

CSS样式

.img_box {
margin-top: 30px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: 1px solid red;
}

.img_box>img {
width: 450px;
height: 500px;
margin: 5px 0;
}

JavaScript部分

// onload 是等所有的资源文件加载
// 完毕以后再绑定事件
window.onload = function() {
// 1、获取一面图片标签元素
// 获取图片列表,
// 即 img 标签列表
let imgs = document.querySelectorAll(‘img’);

// 2、获取到浏览器顶部的距离
function getTop(e) {
return e.offsetTop;
};

// 3、懒加载实现
function lazyload(dataImg) {
// 3.1、获取可视区域高度
let innerHeight = window.innerHeight;
// 3.2、获取滚动区域高度
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

for (let i = 0; i < dataImg.length; i++) {
// 3.3、如果图片距离顶部的距离大于
// 可视区域和滚动区域之和时触发懒加载
if ((innerHeight + scrollTop) > getTop(dataImg[i])) {
// 3.4、真实情况是页面开始有 1 秒空白,
// 所以使用 setTimeout 定时 1s
(function(i) {
setTimeout(function() {
// 3.5、不加立即执行函数 i 会等于 9
// 隐形加载图片或其他资源,
// 创建一个临时图片,
// 这个图片在内存中不会到页面上去。
// 实现隐形加载
let temp = new Image();
// console.log(‘new:’, temp);

// 3.6、只会请求一次
temp.src = dataImg[i].getAttribute(‘data-src’);
// console.log(‘src:’, temp);

// 3.7、onload 判断图片加载完毕,
// 真实图片加载完毕,
// 再赋值给 dom 节点
temp.onload = function() {
// 3.8、获取自定义属性 data-src,
// 用真图片替换假图片
dataImg[i].src = dataImg[i].getAttribute(‘data-src’);
// console.log(‘dataImg:’, dataImg[i].src);
};
}, 1000);
})(i);
};
};
};

// 4、调用懒加载函数,
// 传递图片标签元素
lazyload(imgs);

// 5、滚动监听
window.onscroll = function() {
// 调用懒加载函数
lazyload(imgs);
};
};

————下载必看————

1、资源通过互联网渠道公开获取,仅供阅读测试,请在下载后24小时内删除,谢谢合作!
2、本站解压密码统一为:yudouyudou
3、本站微信客服/失效补发:rsst58
4、若版权方认为本站侵权,请联系发邮件至(rsstime@qq.com)处理。
5、关于下载,播放声音字幕,解压等问题,请点击查看>>常见问题
时光屋 » 如何实现WEB端图片懒加载!

发表评论

至臻视听_发烧收藏

会员介绍 常见问题