jquery实现图片懒加载
多话不说，直接上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta http-equiv="Cache-Control" content="no-transform" />
<script src="jquery-1.7.1.min.js"></script>
</head>
<style type="text/css">
#lazyLoadImage img {
width: 100%;
height: 900px;
border: 1px solid #CCCCCC;
padding: 3px;
float: left;
margin: 10px;
visibility: visible;
opacity: 0.00;
filter: alpha(opacity=00);
-moz-opacity: 0.0;
}
</style>
<body>
<div id="lazyLoadImage">
<img pic="http://pic.sousuohou.com/images/1.jpg" />
<img pic="http://pic.sousuohou.com/images/2.jpg" />
<img pic="http://pic.sousuohou.com/images/3.jpg" />
<img pic="http://pic.sousuohou.com/images/4.jpg" />
<img pic="http://pic.sousuohou.com/images/5.jpg" />
<img pic="http://pic.sousuohou.com/images/1.jpg" />
<img pic="http://pic.sousuohou.com/images/1.jpg" />
<img pic="http://pic.sousuohou.com/images/1.jpg" />
<img pic="http://pic.sousuohou.com/images/1.jpg" />
<img pic="http://pic.sousuohou.com/images/1.jpg" />
<img pic="http://pic.sousuohou.com/images/1.jpg" />
<img pic="http://pic.sousuohou.com/images/1.jpg" />
<img pic="http://pic.sousuohou.com/images/1.jpg" />
<img pic="http://pic.sousuohou.com/images/1.jpg" />
<img pic="http://pic.sousuohou.com/images/1.jpg" />
<img pic="http://pic.sousuohou.com/images/1.jpg" />
<img pic="http://pic.sousuohou.com/images/1.jpg" />
<img pic="http://pic.sousuohou.com/images/1.jpg" />
<img pic="http://pic.sousuohou.com/images/1.jpg" />
<img pic="http://pic.sousuohou.com/images/1.jpg" />
</div>
</body>
<script type="text/javascript">
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();//初始化
//判断浏览器
$(document).scroll(imgLazyLoad);//当滚动条滚动时,扫描需要加载的div
// if($.browser.msie){
// //IE浏览器
// $(window).scroll(imgLazyLoad);//浏览器的兼容
// }else {
// //其他浏览器 ff chrome 测试通过
// $(document).scroll(imgLazyLoad);//当滚动条滚动时,扫描需要加载的div
// }
//$("body").scroll(imgLazyLoad);//浏览器的兼容 不清楚是哪款浏览器
});
</script>
</html>
文末小福利免费视频资源网站：www.sousuohou.com
