您的位置：首页 > Web前端 > JavaScript

原生JS实现图片懒加载

2017-12-18 00:00 686 查看

比较简单的一次尝试：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>textarea</title>

<!--图片懒加载-->
<style>
#outer{
width: 150px;
height:2700px;
}
#outer>img{
display: block;
width: 150px;
height: 150px;
}

</style>
</head>
<body>
<div id="outer">
<img src="" alt="" img-src="https://oe9nbfytu.qnssl.com/user/657fb4525f1543629bf2cc0a7e8abaf8/thumb">
<img src="" alt="" img-src="https://oe9nbfytu.qnssl.com/user/aa30674459ab49029f03228ba211446d/thumb">
<img src="" alt="" img-src="https://oe9nbfytu.qnssl.com/user/00dd7dd07f3d4dcdb4272425fa634cbc/thumb">
<img src="" alt="" img-src="https://oe9nbfytu.qnssl.com/user/93b6a39ca2184656be25109c76a78148/thumb">
<img src="" alt="" img-src="https://oe9nbfytu.qnssl.com/user/d29fcba68f394d809ea2b59ddaa226ce/thumb">
<img src="" alt="" img-src="https://oe9nbfytu.qnssl.com/user/3437537b93fb4426a9cc2a3d8caed669/thumb">
<img src="" alt="" img-src="https://oe9nbfytu.qnssl.com/user/efc7516cddf84cc9b77abfcf467615d4/thumb">
<img src="" alt="" img-src="https://oe9nbfytu.qnssl.com/user/adca6ffabbce462a92503aff95847503/thumb">
<img src="" alt="" img-src="https://oe9nbfytu.qnssl.com/user/ff5622945b7b44618628fa2d60a43142/thumb">
<img src="" alt="" img-src="https://oe9nbfytu.qnssl.com/user/93806a38dc234d3cbcb6443458dfca2d/thumb">
<img src="" alt="" img-src="https://oe9nbfytu.qnssl.com/user/4d43d36688b240c4977cb3536c8ed69a/thumb">
<img src="" alt="" img-src="https://oe9nbfytu.qnssl.com/user/f75fc329edcd49158443a0a7948b15f8/thumb">
<img src="" alt="" img-src="https://oe9nbfytu.qnssl.com/user/e9b445174457409298b93513807b3591/thumb">
<img src="" alt="" img-src="https://oe9nbfytu.qnssl.com/user/93b6a39ca2184656be25109c76a78148/thumb">
<img src="" alt="" img-src="https://oe9nbfytu.qnssl.com/user/d0ad92fd396e4456a9821c265d0d3322/thumb">
<img src="" alt="" img-src="https://oe9nbfytu.qnssl.com/user/2a4830acd22f400c983d9c8f6a1e1362/thumb">
<img src="" alt="" img-src="https://oe9nbfytu.qnssl.com/user/4a222ba68f9a4fa6882ab7f88f9fa5f0/thumb">
<img src="" alt="" img-src="https://oe9nbfytu.qnssl.com/user/935f711904b740ea907a3e0a279106cf/thumb">
</div>

<script>
var allImg = document.querySelectorAll('img');
var length = allImg.length;
// 存储图片加载到的位置，避免每次都从第一张照片开始
var num;
window.onscroll = function () {
var seeHeight = document.documentElement.clientHeight;
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
for(var i = 0;i<length;i++){
if(allImg[i].offsetTop < seeHeight + scrollTop){
if(allImg[i].getAttribute('src') == ''){
allImg[i].src = allImg[i].getAttribute('img-src')
}
num = i+1;
console.log('num:'+ num);
}
}
}
</script>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航