图片懒加载

49次阅读

共计 3029 个字符，预计需要花费 8 分钟才能阅读完成。

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0″>
<title>lazyLoad</title>
<style type=”text/css” media=”all”>
* {
margin: 0;
padding: 0;
}
#wapper {
width: 520px;
margin: 30px auto;
border: 1px solid red;
overflow: hidden;
}

li {
width: 160px;
height: 160px;
float: left;
list-style: none;
margin: 5px;
background: url(http://img.lanrentuku.com/img/allimg/1212/5-121204193R5-50.gif) center center no-repeat;
border: 1px dashed #cccccc;
}
img{
width:100%
}
</style>
</head>
<body>
<div id=”wapper”>
<ul>
<li data-src=”http://img.sccnn.com/simg/341/11818.jpg”></li>
<li data-src=”http://img.sccnn.com/simg/341/11818.jpg”></li>
<li data-src=”http://img.sccnn.com/simg/341/11818.jpg”></li>
<li data-src=”http://img.sccnn.com/simg/341/11818.jpg”></li>
<li data-src=”http://img.sccnn.com/simg/341/11818.jpg”></li>
<li data-src=”http://img.sccnn.com/simg/341/11818.jpg”></li>
<li data-src=”http://img.sccnn.com/simg/341/11818.jpg”></li>
<li data-src=”http://img.sccnn.com/simg/341/11818.jpg”></li>
<li data-src=”http://img.sccnn.com/simg/341/11818.jpg”></li>
<li data-src=”http://img.sccnn.com/simg/341/11818.jpg”></li>
<li data-src=”http://img.sccnn.com/simg/341/11818.jpg”></li>
<li data-src=”http://img.sccnn.com/simg/341/11818.jpg”></li>
<li data-src=”http://img.sccnn.com/simg/341/11818.jpg”></li>
<li data-src=”http://img.sccnn.com/simg/341/11818.jpg”></li>
<li data-src=”http://img.sccnn.com/simg/341/11818.jpg”></li>
<li data-src=”http://img.sccnn.com/simg/341/11818.jpg”></li>
<li data-src=”http://img.sccnn.com/simg/341/11818.jpg”></li>
<li data-src=”http://img.sccnn.com/simg/341/11818.jpg”></li>
<li data-src=”http://img.sccnn.com/simg/341/11818.jpg”></li>
<li data-src=”http://img.sccnn.com/simg/341/11818.jpg”></li>
<li data-src=”http://img.sccnn.com/simg/341/11818.jpg”></li>
<li data-src=”http://img.sccnn.com/simg/341/11818.jpg”></li>
<li data-src=”http://img.sccnn.com/simg/341/11818.jpg”></li>
<li data-src=”http://img.sccnn.com/simg/341/11818.jpg”></li>
<li data-src=”http://img.sccnn.com/simg/341/11818.jpg”></li>
<li data-src=”http://img.sccnn.com/simg/341/11818.jpg”></li>
<li data-src=”http://img.sccnn.com/simg/341/11818.jpg”></li>
</ul>
</div>
<script>
window.onload = function () {
window.onscroll();
};
window.onscroll = function () {
var oDiv = document.getElementById(‘wapper’);
var oUl = oDiv.children[0];
var aLi = oUl.children;

for (var i = 0, l = aLi.length; i < l; i++) {
var oLi = aLi[i];
// 检查 oLi 是否在可视区域
var H = document.documentElement.clientHeight + (document.documentElement.scrollTop || document.body.scrollTop);
var liTop = getH(oLi);
if (liTop < H) {
setTimeout(“setImg(” + i + “)”, 500);
}
console.log(i);
}
};
function setImg(index){
var oDiv=document.getElementById(“wapper”)
var oUl=oDiv.children[0];
var aLi=oUl.children;
if (aLi[index].dataset) {
var src=aLi[index].dataset.src;
} else{
var src=aLi[index].getAttribute(‘data-src’);
}
var oImg=document.createElement(‘img’);
oImg.src=src;
if (aLi[index].children.length==0) {
aLi[index].appendChild(oImg);
}
}
// 获得对象距离页面顶端的距离
function getH(obj) {
var h = 0;
while (obj) {
h += obj.offsetTop;
obj = obj.offsetParent;
}
return h;
}
</script>
</body>
</html>