懒加载图片

jquery插件lazy load官网(http://www.appelsiini.net/projects/lazyload)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
 <HEAD>
  <TITLE>lazyload 加载图片测试</TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <style>
      #div1 {
          width: 800px;
          margin: 30px auto;
          border: 1px solid red;
          overflow: hidden;
      }

      li {
          width: 210px;
          height: 140px;
          float: left;
          list-style: none;
          margin: 5px;
          background: url(../Images/loading.gif) center center no-repeat;
          border: 1px dashed green;
      }
  </style>
 </HEAD>

 <BODY>
     <div id="div1">
         <ul>
             <li data-src="http://cc.cocimg.com/api/uploads/150303/a9175f021e0be761c82e4c0a770e7413.jpg"></li>
             <li data-src="http://cc.cocimg.com/api/uploads/150309/87d79abec8e20a2f12265dbb9be8e592.jpg"></li>
             <li data-src="http://cc.cocimg.com/api/uploads/150303/a9175f021e0be761c82e4c0a770e7413.jpg"></li>
             <li data-src="http://cc.cocimg.com/api/uploads/150303/a9175f021e0be761c82e4c0a770e7413.jpg"></li>
             <li data-src="http://cc.cocimg.com/api/uploads/150309/87d79abec8e20a2f12265dbb9be8e592.jpg"></li>
             <li data-src="http://cc.cocimg.com/api/uploads/150309/87d79abec8e20a2f12265dbb9be8e592.jpg"></li>
             <li data-src="http://cc.cocimg.com/api/uploads/150303/a9175f021e0be761c82e4c0a770e7413.jpg"></li>
             <li data-src="http://cc.cocimg.com/api/uploads/150303/a9175f021e0be761c82e4c0a770e7413.jpg"></li>
             <li data-src="http://cc.cocimg.com/api/uploads/150309/87d79abec8e20a2f12265dbb9be8e592.jpg"></li>
             <li data-src="http://cc.cocimg.com/api/uploads/150303/a9175f021e0be761c82e4c0a770e7413.jpg"></li>
             <li data-src="http://cc.cocimg.com/api/uploads/150303/a9175f021e0be761c82e4c0a770e7413.jpg"></li>
             <li data-src="http://cc.cocimg.com/api/uploads/150303/a9175f021e0be761c82e4c0a770e7413.jpg"></li>
             <li data-src="http://cc.cocimg.com/api/uploads/150309/87d79abec8e20a2f12265dbb9be8e592.jpg"></li>
             <li data-src="http://cc.cocimg.com/api/uploads/150309/87d79abec8e20a2f12265dbb9be8e592.jpg"></li>
             <li data-src="http://cc.cocimg.com/api/uploads/150303/a9175f021e0be761c82e4c0a770e7413.jpg"></li>
             <li data-src="http://cc.cocimg.com/api/uploads/150303/a9175f021e0be761c82e4c0a770e7413.jpg"></li>
             <li data-src="http://cc.cocimg.com/api/uploads/150309/87d79abec8e20a2f12265dbb9be8e592.jpg"></li>
             <li data-src="http://cc.cocimg.com/api/uploads/150303/a9175f021e0be761c82e4c0a770e7413.jpg"></li>
             <li data-src="http://cc.cocimg.com/api/uploads/150309/87d79abec8e20a2f12265dbb9be8e592.jpg"></li>
             <li data-src="http://cc.cocimg.com/api/uploads/150303/a9175f021e0be761c82e4c0a770e7413.jpg"></li>
             <li data-src="http://cc.cocimg.com/api/uploads/150303/a9175f021e0be761c82e4c0a770e7413.jpg"></li>
             <li data-src="http://cc.cocimg.com/api/uploads/150303/a9175f021e0be761c82e4c0a770e7413.jpg"></li>
             <li data-src="http://cc.cocimg.com/api/uploads/150303/a9175f021e0be761c82e4c0a770e7413.jpg"></li>
             <li data-src="http://cc.cocimg.com/api/uploads/150309/87d79abec8e20a2f12265dbb9be8e592.jpg"></li>
             <li data-src="http://cc.cocimg.com/api/uploads/150303/a9175f021e0be761c82e4c0a770e7413.jpg"></li>
             <li data-src="http://cc.cocimg.com/api/uploads/150303/a9175f021e0be761c82e4c0a770e7413.jpg"></li>
             <li data-src="http://cc.cocimg.com/api/uploads/150303/a9175f021e0be761c82e4c0a770e7413.jpg"></li>
             <li data-src="http://cc.cocimg.com/api/uploads/150303/a9175f021e0be761c82e4c0a770e7413.jpg"></li>
             <li data-src="http://cc.cocimg.com/api/uploads/150303/a9175f021e0be761c82e4c0a770e7413.jpg"></li>
             <li data-src="http://cc.cocimg.com/api/uploads/150303/a9175f021e0be761c82e4c0a770e7413.jpg"></li>
             <li data-src="http://cc.cocimg.com/api/uploads/150303/a9175f021e0be761c82e4c0a770e7413.jpg"></li>
             <li data-src="http://cc.cocimg.com/api/uploads/150303/a9175f021e0be761c82e4c0a770e7413.jpg"></li>
             <li data-src="http://cc.cocimg.com/api/uploads/150303/a9175f021e0be761c82e4c0a770e7413.jpg"></li>
             <li data-src="http://cc.cocimg.com/api/uploads/150303/a9175f021e0be761c82e4c0a770e7413.jpg"></li>
             <li data-src="http://cc.cocimg.com/api/uploads/150303/a9175f021e0be761c82e4c0a770e7413.jpg"></li>
             <li data-src="http://cc.cocimg.com/api/uploads/150303/a9175f021e0be761c82e4c0a770e7413.jpg"></li>
             <li data-src="http://cc.cocimg.com/api/uploads/150303/a9175f021e0be761c82e4c0a770e7413.jpg"></li>
             <li data-src="http://cc.cocimg.com/api/uploads/150303/a9175f021e0be761c82e4c0a770e7413.jpg"></li>
             <li data-src="http://cc.cocimg.com/api/uploads/150303/a9175f021e0be761c82e4c0a770e7413.jpg"></li>
             <li data-src="http://cc.cocimg.com/api/uploads/150303/a9175f021e0be761c82e4c0a770e7413.jpg"></li>
             <li data-src="http://cc.cocimg.com/api/uploads/150303/a9175f021e0be761c82e4c0a770e7413.jpg"></li>
             <li data-src="http://cc.cocimg.com/api/uploads/150303/a9175f021e0be761c82e4c0a770e7413.jpg"></li>
             <li data-src="http://cc.cocimg.com/api/uploads/150303/a9175f021e0be761c82e4c0a770e7413.jpg"></li>
             <li data-src="http://cc.cocimg.com/api/uploads/150303/a9175f021e0be761c82e4c0a770e7413.jpg"></li>
             <li data-src="http://cc.cocimg.com/api/uploads/150303/a9175f021e0be761c82e4c0a770e7413.jpg"></li>
         </ul>
     </div>
 </BODY>
</HTML>

<script type="text/javascript">

//返回浏览器的可视区域位置
    function getClient(){
        var l,t,w,h;
        l  =  document.documentElement.scrollLeft || document.body.scrollLeft;
         t  =  document.documentElement.scrollTop || document.body.scrollTop;
         w =   document.documentElement.clientWidth;
         h =   document.documentElement.clientHeight;
         return {'left':l,'top':t,'width':w,'height':h} ;
    }


    //返回待加载资源位置
    function getSubClient(p){
       var l = 0,t = 0,w,h;
       w = p.offsetWidth ;
       h = p.offsetHeight;

       while(p.offsetParent){
        l += p.offsetLeft ;
        t += p.offsetTop ;
        p = p.offsetParent;
     }

     return {'left':l,'top':t,'width':w,'height':h } ;
  }


    //判断两个矩形是否相交,返回一个布尔值
    function intens(rec1,rec2){
       var lc1,lc2,tc1,tc2,w1,h1;
       lc1 = rec1.left + rec1.width / 2;
       lc2 = rec2.left + rec2.width / 2;
       tc1 = rec1.top + rec1.height / 2 ;
       tc2 = rec2.top + rec2.height / 2 ;
       w1 = (rec1.width + rec2.width) / 2 ;
       h1 = (rec1.height + rec2.height) / 2;
       return Math.abs(lc1 - lc2) < w1 && Math.abs(tc1 - tc2) < h1 ;
    }

     //比较某个子区域是否呈现在浏览器区域
       function jiance(arr,prec1,callback){
          var prec2;
          for(var i = arr.length - 1 ; i >= 0 ;i--){
            if(arr[i]){
             prec2 =  getSubClient(arr[i]);
             if(intens(prec1,prec2)){
                callback(arr[i]);
                //加载资源后，删除监测
                delete arr[i];
               }
            }
          }
        }
  
    //检测目标对象是否出现在客户区
      function autocheck(){
       var prec1 = getClient(); 
       jiance(arr,prec1,function(obj){
           console.info(obj);

      //加载资源...
           setTimeout(function () {//延迟600ms,模拟网络
               var oImg = document.createElement('img');
               oImg.src = obj.getAttribute("data-src");
               obj.appendChild(oImg);
           }, 600);
           
           
       })
    }

   //需要按需加载区域集合
    var arr ;
    //测试代码
    window.onload = function(){
        
        var oDiv = document.getElementById('div1');
        var oUl = oDiv.children[0];
        var aLi = oUl.children;

        var newArr = new Array();
        for (var i = 0, l = aLi.length; i < l; i++) {
            var oLi = aLi[i];
            newArr[i] = aLi[i];
        }
        arr = newArr;
        autocheck();
        //浏览器客户区尺寸改变后，重新计算
        window.onscroll = function(){
         //重新计算
           autocheck();
        }

        window.onresize = function(){
         //重新计算
           autocheck();
        }
    }

</script>
posted on 2015-03-09 17:39 二狗你变了阅读(121) 评论(0) 收藏举报
刷新页面返回顶部
DHUI

懒加载图片

导航

公告
