<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>懒加载
</title>
<style>
*{
margin:0;
padding: 0;
}
#outer{
width: 800px;
margin:50px auto;
overflow: hidden;
}
h1{
text-align: center;
}
#outer img:nth-of-type(2n){
float:right;
margin-bottom:20px;
}
#outer img:nth-of-type(2n-1){
float:left;
margin-bottom: 20px;
}
img{
width: 350px;
height: 200px;
}
</style>
</head>
<body>
<div id="outer">
<h1>这里是懒加载(延迟加载)图片
</h1>
<img src="" alt="" loadRc="img/1.jpg">
<img src="" alt="" loadRc="img/2.jpg">
<img src="" alt="" loadRc="img/3.jpg">
<img src="" alt="" loadRc="img/4.jpg">
<img src="" alt="" loadRc="img/5.jpg">
<img src="" alt="" loadRc="img/6.jpg">
<img src="" alt="" loadRc="img/7.jpg">
<img src="" alt="" loadRc="img/8.jpg">
<img src="" alt="" loadRc="img/9.jpg">
<img src="" alt="" loadRc="img/10.jpg">
<img src="" alt="" loadRc="img/11.jpg">
<img src="" alt="" loadRc="img/12.jpg">
<img src="" alt="" loadRc="img/13.jpg">
<img src="" alt="" loadRc="img/14.jpg">
<img src="" alt="" loadRc="img/15.jpg">
<img src="" alt="" loadRc="img/16.jpg">
<img src="" alt="" loadRc="img/17.jpg">
<img src="" alt="" loadRc="img/18.jpg">
<img src="" alt="" loadRc="img/19.jpg">
<img src="" alt="" loadRc="img/20.jpg">
<img src="" alt="" loadRc="img/21.jpg">
<img src="" alt="" loadRc="img/22.jpg">
</div>
<script>
var imgs = document.getElementsByTagName('img');
function getTL(obj){
var t = 0;
var l = 0;
var start = obj;
while(obj){
if(obj == start){
t += obj.offsetTop;
l += obj.offsetLeft;
obj = obj.offsetParent;
}else{
t += obj.offsetTop + obj.clientTop;
l += obj.offsetLeft + obj.clientLeft;
obj = obj.offsetParent;
}
}
return {left:l,top:t};
}
window.onload = window.onscroll = function(e){
var e = e || window.event;
var h1 = document.documentElement.scrollTop || document.body.scrollTop;
var h2 = document.documentElement.clientHeight;
for(var i=0; i<imgs.length; i++){
if(getTL(imgs[i]).top < h1+h2){
imgs[i].src = imgs[i].getAttribute('loadRc');
}
}
}
</script>
</body>
</html>
转载请注明原文地址: https://www.6miu.com/read-82241.html
