<!DOCTYPE html>
<html>
<head>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
<title>demo lazyload</title>
<meta charset="utf-8">
<style type="text/css">
* {
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
}
.layout {
margin: 0 auto;
width: 1000px;
}
.lazyload img {
width: 300px;
height: 400px;
}
.img-ct {
margin-left: -50px;
overflow: auto;
}
.item {
float: left;
margin-left: 50px;
margin-bottom: 30px;
}
</style>
</head>
<body>
<div class="lazyload">
<div class="layout">
<ul class="img-ct">
<li class="item">
<a href="javascript:void(0)"><img data-img="1.png" src="default.png"></a>
</li>
<li class="item">
<a href="javascript:void(0)"><img data-img="1.png" src="default.png"></a>
</li>
<li class="item">
<a href="javascript:void(0)"><img data-img="1.png" src="default.png"></a>
</li>
<li class="item">
<a href="javascript:void(0)"><img data-img="1.png" src="default.png"></a>
</li>
<li class="item">
<a href="javascript:void(0)"><img data-img="2.png" src="default.png"></a>
</li>
<li class="item">
<a href="javascript:void(0)"><img data-img="2.png" src="default.png"></a>
</li>
<li class="item">
<a href="javascript:void(0)"><img data-img="2.png" src="default.png"></a>
</li>
<li class="item">
<a href="javascript:void(0)"><img data-img="2.png" src="default.png"></a>
</li>
<li class="item">
<a href="javascript:void(0)"><img data-img="2.png" src="default.png"></a>
</li>
<li class="item">
<a href="javascript:void(0)"><img data-img="3.png" src="default.png"></a>
</li>
<li class="item">
<a href="javascript:void(0)"><img data-img="3.png" src="default.png"></a>
</li>
<li class="item">
<a href="javascript:void(0)"><img data-img="3.png" src="default.png"></a>
</li>
<li class="item">
<a href="javascript:void(0)"><img data-img="3.png" src="default.png"></a>
</li>
<li class="item">
<a href="javascript:void(0)"><img data-img="3.png" src="default.png"></a>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
var lazyLoad = (function(){
var clock;
function init(){
$(window).on("scroll", function(){
if (clock) {
clearTimeout(clock);
}
clock = setTimeout(function(){
checkShow();
}, 200);
})
checkShow();
}
function checkShow(){
$(".lazyload img").each(function(){
var $cur =$(this);
if($cur.attr('isLoaded')){
return;
}
if(shouldShow($cur)){
showImg($cur);
}
})
}
function shouldShow($node){
var scrollH = $(window).scrollTop(),
winH = $(window).height(),
top = $node.offset().top;
if(top < winH + scrollH){
return true;
}else{
return false;
}
}
function showImg($node){
$node.attr('src', $node.attr('data-img'));
$node.attr('isLoaded', true);
}
return {
init: init
}
})()
lazyLoad.init();
</script>
</body>
</html>
