<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>图片懒加载</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<style type="text/css">
#lazyLoadImage img {
width: 100%;
height: auto ;
border: 1px solid #CCCCCC;
padding: 3px;
float: left;
margin: 10px 0;
visibility: visible;
opacity: 0.00;
filter: alpha(opacity=0);
-moz-opacity: 0.0;
}
</style>
<body>
<div id="lazyLoadImage">
<img pic="http://cdn.jirengu.com/book.jirengu.com/img/1.jpg" />
<img pic="http://cdn.jirengu.com/book.jirengu.com/img/2.jpg" />
<img pic="http://cdn.jirengu.com/book.jirengu.com/img/3.jpg" />
<img pic="http://cdn.jirengu.com/book.jirengu.com/img/4.jpg" />
<img pic="http://cdn.jirengu.com/book.jirengu.com/img/5.jpg" />
<img pic="http://cdn.jirengu.com/book.jirengu.com/img/6.jpg" />
<img pic="http://cdn.jirengu.com/book.jirengu.com/img/7.jpg" />
<img pic="http://cdn.jirengu.com/book.jirengu.com/img/8.jpg" />
<img pic="http://cdn.jirengu.com/book.jirengu.com/img/9.jpg" />
<img pic="http://cdn.jirengu.com/book.jirengu.com/img/10.jpg" />
<img pic="http://cdn.jirengu.com/book.jirengu.com/img/11.jpg" />
<img pic="http://cdn.jirengu.com/book.jirengu.com/img/12.jpg" />
<img pic="http://cdn.jirengu.com/book.jirengu.com/img/13.jpg" />
<img pic="http://cdn.jirengu.com/book.jirengu.com/img/14.jpg" />
<img pic="http://cdn.jirengu.com/book.jirengu.com/img/15.jpg" />
<img pic="http://cdn.jirengu.com/book.jirengu.com/img/16.jpg" />
<img pic="http://cdn.jirengu.com/book.jirengu.com/img/17.jpg" />
<img pic="http://cdn.jirengu.com/book.jirengu.com/img/18.jpg" />
<img pic="http://cdn.jirengu.com/book.jirengu.com/img/19.jpg" />
<img pic="http://cdn.jirengu.com/book.jirengu.com/img/20.jpg" />
<img pic="http://cdn.jirengu.com/book.jirengu.com/img/21.jpg" />
<img pic="http://cdn.jirengu.com/book.jirengu.com/img/22.jpg" />
</div>
</body>
<script type="text/javascript">
//页面第一次加载时
$(function(){
imgLazyLoad();//初始化
$(document).scroll(imgLazyLoad); //当滚动条滚动时,扫描需要加载的div
});
//扫描需要加载的div
function imgLazyLoad(){
$.each($("#lazyLoadImage img"),function(i,o){
//获取窗口高度
var windowHeight = $(window).height(); // windowHeight = windowHeight/2; 设置滚动条在显示屏幕高度2分之1的时候加载图片
//获取滚动条
var scrollTop = $(document).scrollTop();
//先判断是否是加载完的图片 跳出
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);
}
}
});
}
</script>
</html>
网友评论