懒加载

在各种门户网站中，都有大量的图片，尤其是电子商务网站，更多的产品图片，这个时候如果直接访问主页的话，会有很多的图片需要浏览器下载，特别是在网速不好的情况话，打开一个网站需要很长的时间，比如京东首页，而且在很多情况下，用户是不会看网站的每一个图片的，用户只是挑选自己感兴趣的产品，这种情况下，就会有很多的带宽浪费，还会带来不好的用好体验。

         于是图片懒加载的技术就出来了，懒加载是表示只是在用户需要看指定的图片时，才会加载，比如京东首页下面的很多产品和其他tab页。只有用户拉动滚动条到页面下面时才会加载相应的图片（tab类似，在点击tab标题时加载）。说到这，应该聪明的读者都已经明白了相应的技术。对，就是在页面加载的时候把页面中的图片src属性为空，在拉动滚动条时候判断当前图片是否在用户的可视窗口内，如果是，则把图片的src属性赋相应的值，这个时候才去加载图片。

大概的思路就是创建个div 、然后滚动条事件绑定  检测显示的页面div是否在一个高度的条件内、在给图片的src赋值。

document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度

得到滚动条的总长属性值：scrollHeight，还有滚动条当前位置属性 值：scrollTop。

 "jquery-1.7.1.min.js">

 "text/css">
 #lazyLoadImage img{ width:159px; height:71px; border:1px solid #CCCCCC; padding:3px; float:left; margin:10px; visibility:visible;opacity:0.00;filter:alpha(opacity=00);-moz-opacity:0.0;}

filter:alpha(opacity=00);是 ie的、

-moz-opacity:0.0; 是ff的、

 <script>
 function imgLazyLoad(){//扫描需要加载的div
     $.each($("#lazyLoadImage img"),function(i,o){
         //获取窗口高
         var windowHeight=$(window).height();
         //获取滚动条
         var scrollTop=$(document).scrollTop();
         windowHeight=windowHeight; //可以设置滚动条在显示某个高度来lazyload   windowHeight=windowHeight/2; 比如在显示屏幕高度2分之1的时候加载


         //先判断是否是加载完的图片 跳出
         if($(o).attr("src")==$(o).attr("pic")){
             return true;
         }else if( $(o).offset().top<=(scrollTop+windowHeight)  && $(o).offset().top >= scrollTop ){//判断div是不是出在可见的位置
             if($(o).attr("pic") != undefined || $(o).attr("pic") != "undefined" ){
                 var ObjectSrc = $(o).attr("pic");
                 //把pic的值赋给src值
                 $(o).attr("src",ObjectSrc);
                 //css属性改为可见
                 $(o).css("visibility","visible");
                 //渐变时间和渐变值
                 $(o).fadeTo(1000,1.00);
             }
         }
     });
 }
 $(function(){//页面第一次加载时
     imgLazyLoad();//初始化
     //判断浏览器
     if($.browser.msie){
         //IE浏览器
         $(window).scroll(imgLazyLoad);//浏览器的兼容
     }else {
         //其他浏览器 ff chrome 测试通过
         $(document).scroll(imgLazyLoad);//当滚动条滚动时,扫描需要加载的div
     }

     //$("body").scroll(imgLazyLoad);//浏览器的兼容   不清楚是哪款浏览器
 });
 script>




 <div id="lazyLoadImage">
 <img pic="http://csdnimg.cn/www/images/csdnindex_logo.gif"/>
 <img pic="http://csdnimg.cn/www/images/csdnindex_logo.gif"/>
 <img pic="http://csdnimg.cn/www/images/csdnindex_logo.gif"/>
 <img pic="http://csdnimg.cn/www/images/csdnindex_logo.gif"/>
 <img pic="http://csdnimg.cn/www/images/csdnindex_logo.gif"/>
 <img pic="http://csdnimg.cn/www/images/csdnindex_logo.gif"/>
 <img pic="http://csdnimg.cn/www/images/csdnindex_logo.gif"/>
 <img pic="http://csdnimg.cn/www/images/csdnindex_logo.gif"/>
 <img pic="http://csdnimg.cn/www/images/csdnindex_logo.gif"/>
 ...请批量复制多个图片
 <div>