<!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>