在各种门户网站中,都有大量的图片,尤其是电子商务网站,更多的产品图片,这个时候如果直接访问主页的话,会有很多的图片需要浏览器下载,特别是在网速不好的情况话,打开一个网站需要很长的时间,比如京东首页,而且在很多情况下,用户是不会看网站的每一个图片的,用户只是挑选自己感兴趣的产品,这种情况下,就会有很多的带宽浪费,还会带来不好的用好体验。
于是图片懒加载的技术就出来了,懒加载是表示只是在用户需要看指定的图片时,才会加载,比如京东首页下面的很多产品和其他tab页。只有用户拉动滚动条到页面下面时才会加载相应的图片(tab类似,在点击tab标题时加载)。说到这,应该聪明的读者都已经明白了相应的技术。对,就是在页面加载的时候把页面中的图片src属性为空,在拉动滚动条时候判断当前图片是否在用户的可视窗口内,如果是,则把图片的src属性赋相应的值,这个时候才去加载图片。
大概的思路就是创建个div 、然后滚动条事件绑定 检测显示的页面div是否在一个高度的条件内、在给图片的src赋值。
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
得到滚动条的总长属性值:scrollHeight,还有滚动条当前位置属性 值:scrollTop。
- <script src="jquery-1.7.1.min.js"></script>
- <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的、
- <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>