因为项目与图片资源服务器分离,而首页若是全部加载图片的话会很慢、所以研究了一下懒加载的例子,然后适用到了项目中。
大概的思路就是创建个div 、然后滚动条事件绑定 检测显示的页面div是否在一个高度的条件内、在给图片的src赋值、
需要jquery.js 我的版本是1.7.1min
<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>