多图片网页实现延迟加载图片

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">    
    <title>多图片页面的延迟加载</title>
    <style>
    *{
        padding:0;
        margin:0;
    }
      img{
          width: 300px;
          height: 200px;
          display: block;
      }
    </style>
    <script src="jquery.js"></script>
</head>
<body>
    <img src="images/loading.gif" lazy-src="http://imgsrc.baidu.com/forum/pic/item/359b033b5bb5c9ea0233765ed539b6003bf3b34e.jpg" alt="">
    <img src="images/loading.gif" lazy-src="http://img05.tooopen.com/images/20140524/sy_61761371996.jpg" alt="">
    <img src="images/loading.gif" lazy-src="http://h.hiphotos.baidu.com/zhidao/pic/item/b90e7bec54e736d1d8f330059a504fc2d46269df.jpg" alt="">
    <img src="images/loading.gif" lazy-src="http://pic76.nipic.com/file/20150831/10781037_235052985000_2.jpg" alt="">
    <img src="images/loading.gif" lazy-src="http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1307/22/c3/23612931_1374475920057.jpg" alt="">
    <img src="images/loading.gif" lazy-src="http://pic1.desk.chinaz.com/file/11.12.21/1/shishangzmbz34.jpg" alt="">
    <img src="images/loading.gif" lazy-src="http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1206/04/c1/11869944_1338790262403.jpg" alt="">
    <img src="images/loading.gif" lazy-src="http://www.sucaitianxia.com/Photo/pic/200909/haiys33.jpg" alt="">
    <img src="images/loading.gif" lazy-src="http://www.bz55.com/uploads/allimg/101110/1J2343437-7.jpg" alt="">
    <img src="images/loading.gif" lazy-src="http://www.sucaitianxia.com/Photo/pic/200909/haiys12.jpg" alt="">
    <img src="images/loading.gif" lazy-src="http://e.hiphotos.baidu.com/zhidao/pic/item/314e251f95cad1c843e51c6b7f3e6709c93d5124.jpg" alt="">
    <img src="images/loading.gif" lazy-src="http://abc.2008php.com/2011_Website_appreciate/11-07-09/20110709005018.jpg" alt="">
    <img src="images/loading.gif" lazy-src="http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1207/27/c0/12571618_1343368587828.jpg" alt="">
    <img src="images/loading.gif" lazy-src="http://imgsrc.baidu.com/forum/pic/item/908fa0ec08fa513d6bc6bd4b3d6d55fbb2fbd933.jpg" alt="">
    <img src="images/loading.gif" lazy-src="http://img2.niutuku.com/desk/1208/1939/ntk-1939-20781.jpg" alt="">
    <img src="images/loading.gif" lazy-src="http://pic2.desk.chinaz.com/file/201212/4/huibiaobiz80.jpg" alt="">
    <script>
    //原生JS方法
       var test={};
       test.getTop=function(imgT){
          var top=0;
          do{
              top+=imgT.offsetTop;       
          }while((imgT=imgT.offsetParent).nodeName!='BODY');  //获取到body节点为止来取得图片的高度
          return top;
       };
       test.lazy=function(){
           var top=document.body.scrollTop||document.documentElement.scrollTop;  //获得滚动条下拉的距离
        var h=document.documentElement.clientHeight||document.body.clientHeight; //获得可视界面的高度
        var imgs=document.getElementsByTagName('img');                          //获得所有图片
        for(var i=0;i<imgs.length;i++){
            var _src=imgs[i].getAttribute('lazy-src');
            if(_src!==imgs[i].src){
                var _top=test.getTop(imgs[i]);
                //console.log(_top+" "+top+" "+h)
                if( _top>=top && _top<=top+h){     //在可视区域内的图片加载
                    imgs[i].src=_src;
                }
            }
        }
       }
       test.lazy();
       window.onscroll=function(){
           test.lazy();
       }
 
    </script>
</body>
</html>