<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {margin:0; padding:0;}
ul {list-style:none;}
.wrapper {1000px; margin:100px auto 0;}
.wrapper h2 {background:#ccc; height:40px; line-height:40px; text-align:center;}
.box {border:1px solid #ccc; height:550px; margin:10px 0;}
.wrapper ul {overflow:hidden; border:1px solid #ccc; padding:15px 0;}
.wrapper li {float:left; 199px;text-align:center;}
.wrapper li a {display:block;}
</style>
<script type="text/javascript">
window.onload = function(){
//获取所有的图片
var imgs = document.getElementsByTagName('img');
//绑定一个滚动事件
document.onscroll = function(){
var st = document.body.scrollTop || document.documentElement.scrollTop;
//获取当前视窗的高度，这个是不变的
var ch = document.documentElement.clientHeight;
for (var i = 0 , len = imgs.length; i < len; i++) {
var ot = imgs[i].offsetTop;
if (ch + st >= ot + 50) {
imgs[i].src = imgs[i].getAttribute('data-src');
}
}
/*
var ot = imgs[0].offsetTop;
console.log(st);
console.log( imgs[0].offsetTop );
console.log( ch );
//此处加50只是为了测试，实际开发中不需要
if ( ch + st >= ot + 50) {
//图片应该要显示，就是设置其src属性
imgs[0].src = imgs[0].getAttribute('data-src');
}*/
}
}
</script>
</head>
<body>
<div class="wrapper">
<h2>图片延迟加载</h2>
<div class="box">
</div>
<ul>
<li>
<img data-src="images/v1.jpg" alt="" />
<a href="">电影1</a>
</li>
<li>
<img data-src="images/v2.jpg" alt="" />
<a href="">电影2</a>
</li>
<li>
<img data-src="images/v3.jpg" alt="" />
<a href="">电影3</a>
</li>
<li>
<img data-src="images/v4.jpg" alt="" />
<a href="">电影4</a>
</li>
<li>
<img data-src="images/v5.jpg" alt="" />
<a href="">电影5</a>
</li>
</ul>
<div class="box">
</div>
<ul>
<li>
<img data-src="images/v6.jpg" alt="" />
<a href="">电影6</a>
</li>
<li>
<img data-src="images/v7.jpg" alt="" />
<a href="">电影7</a>
</li>
<li>
<img data-src="images/v8.jpg" alt="" />
<a href="">电影8</a>
</li>
<li>
<img data-src="images/v9.jpg" alt="" />
<a href="">电影9</a>
</li>
<li>
<img data-src="images/v10.jpg" alt="" />
<a href="">电影10</a>
</li>
</ul>
<div class="box">
</div>
<ul>
<li>
<img data-src="images/v11.jpg" alt="" />
<a href="">电影11</a>
</li>
<li>
<img data-src="images/v12.jpg" alt="" />
<a href="">电影12</a>
</li>
<li>
<img data-src="images/v13.jpg" alt="" />
<a href="">电影13</a>
</li>
<li>
<img data-src="images/v14.jpg" alt="" />
<a href="">电影14</a>
</li>
<li>
<img data-src="images/v15.jpg" alt="" />
<a href="">电影15</a>
</li>
</ul>
<div class="box">
</div>
</div>
</body>
</html>