JavaScript不知道图片宽高的懒加载方法，解决了重复图片加载bug
汪安然
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>懒加载代码(不确定高度)</title>
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
<!-- 引入懒加载文件
使用：
data-original 为真实图片路径
src 是loading 图片
-->
<script src="index_files/lazyLoad.js" type="text/javascript" charset="utf-8"></script>
<style>
/* 不确定高度 */
img {
width: 500px;
}
</style>
</head>
<body>
<div>
<img data-original="index_files/1_01.jpg" src="index_files/loading.gif" alt=""><br>
<img data-original="index_files/1_02.jpg" src="index_files/loading.gif" alt=""><br>
<img data-original="index_files/1_03.jpg" src="index_files/loading.gif" alt=""><br>
<img data-original="index_files/1_04.jpg" src="index_files/loading.gif" alt=""><br>
<img data-original="index_files/1_05.jpg" src="index_files/loading.gif" alt=""><br>
<img data-original="index_files/1_06.png" src="index_files/loading.gif" alt=""><br>
<img data-original="index_files/1_07.png" src="index_files/loading.gif" alt=""><br>
<img data-original="index_files/1_08.png" src="index_files/loading.gif" alt=""><br>
<img data-original="index_files/1_09.png" src="index_files/loading.gif" alt=""><br>
<img data-original="index_files/1_10.png" src="index_files/loading.gif" alt="">
</div>
</body>
</html>
// lazyLoad.js代码：
// 前对象到其上级层顶部的距离 offsetTop
// 可视区域高度 = 浏览器窗口高度 + 滚动条距离
// 浏览器窗口高度 window.innerHeight || document.documentElement.clientHeight
// 滚动条距离 document.body.scrollTop || document.documentElement.scrollTop
let t = null
let isExist = []
function lazyLoad()
{
if (t) clearTimeout(t)
t = setTimeout(() => {
// 获取可视区高度：窗口高度 + 滚动高度
let windowH = window.innerHeight || document.documentElement.clientHeight
let scrollH = document.body.scrollTop || document.documentElement.scrollTop
// 加一定的距离
let showH = windowH + scrollH + 500
console.log('total:'+showH)
// 获取所有图片
let imgs = document.querySelectorAll('img')
// 遍历 判断 img距离 是否小于 可视距离
for (let i=0; i<imgs.length; i++)
{
// 如果 isExist[i] !=1 则赋值src 防止一张图片加载多次
if(isExist[i] != 1) {
if (imgs[i].offsetTop < showH) {
imgs[i].src = imgs[i].getAttribute('data-original')
isExist[i] = 1
}
}
}
}, 0)
}
lazyLoad()
window.onscroll = lazyLoad
// 有人问我 希望前面几张图片进去的时候能正常显示，不希望显示loading图片
// 你直接 <img data-original="index_files/1_01.jpg" src="index_files/1_01.jpg" alt="">
// src 写真实路劲就行了
类似资料：