懒加载

来源：互联网发布：href中调用javascript 编辑：程序博客网时间：2024/06/06 08:38

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

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

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

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

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

[javascript] view plaincopy
<script src="jquery-1.7.1.min.js"></script>  

[css] view plaincopy
<style type="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;}  
</style>  

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

-moz-opacity:0.0; 是ff的、

[html] view plaincopy
<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>  

0 0