<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>懒加载</title>
<style type="text/css">
img{
width: 300px;
height: 300px;
background: #fac;
}
</style>
</head>
<body>
<ul>
<li><img data-src="../../RMS/1.jpg" alt=""></li>
<li><img data-src="../../RMS/2.jpg" alt=""></li>
<li><img data-src="../../RMS/3.jpg" alt=""></li>
<li><img data-src="../../RMS/4.jpg" alt=""></li>
<li><img data-src="../../RMS/5.jpg" alt=""></li>
<li><img data-src="../../RMS/6.jpg" alt=""></li>
<li><img data-src="../../RMS/7.jpg" alt=""></li>
<li><img data-src="../../RMS/8.jpg" alt=""></li>
<li><img data-src="../../RMS/9.jpg" alt=""></li>
<li><img data-src="../../RMS/10.jpg" alt=""></li>
<li><img data-src="../../RMS/11.jpg" alt=""></li>
<li><img data-src="../../RMS/12.jpg" alt=""></li>
<li><img data-src="../../RMS/13.jpg" alt=""></li>
<li><img data-src="../../RMS/14.jpg" alt=""></li>
<li><img data-src="../../RMS/15.jpg" alt=""></li>
<li><img data-src="../../RMS/16.jpg" alt=""></li>
<li><img data-src="../../RMS/17.jpg" alt=""></li>
<li><img data-src="../../RMS/18.jpg" alt=""></li>
<li><img data-src="../../RMS/19.jpg" alt=""></li>
<li><img data-src="../../RMS/20.jpg" alt=""></li>
</ul>
<script type="text/javascript">
// 获取图片
var imgs = document.querySelectorAll("img");
// 获取高度
var h = window.innerHeight;
document.onscroll = thatop;
thatop();
function thatop() {
// 获取滚动条的位置 也就是当前屏幕的位置
var t = document.documentElement.scrollTop || document.body.scrollTop;
// 当前屏幕的高度 + 滚动条的位置 = 当前屏幕的位置 (可视区域) t + h
var num = t + h;
for (var i = 0; i < imgs.length; i++) {
if (imgs[i].offsetTop <= num) {
imgs[i].src = imgs[i].getAttribute('data-src');
}
}
}
</script>
</body>
</html>
网友评论