步浪
2017-11-16
2483
一、懒加载即懒的不想加载无用的东西，只加载界面可视区域的内容；
二、代码部分：
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>懒加载实例----步浪博客</title>
<style type="text/css">
img{
width: 600px;
height: 260px;
}
</style>
</head>
<body>
<div>
<img src="img/grey.gif" dataimg="http://bulang123.cn/Skin/home/public/img/listLogo.png" alt="" />
</div>
<div>
<img src="img/grey.gif" dataimg="http://bulang123.cn/Skin/home/public/img/listLogo.png" alt="" />
</div>
<div>
<img src="img/grey.gif" dataimg="http://bulang123.cn/Skin/home/public/img/listLogo.png" alt="" />
</div>
<div>
<img src="img/grey.gif" dataimg="http://bulang123.cn/Skin/home/public/img/listLogo.png" />
</div>
<div>
<img src="img/grey.gif" dataimg="http://bulang123.cn/Skin/home/public/img/listLogo.png" alt="" />
</div>
<div>
<img src="img/grey.gif" dataimg="http://bulang123.cn/Skin/home/public/img/listLogo.png" alt="" />
</div>
<div>
<img src="img/grey.gif" dataimg="http://bulang123.cn/Skin/home/public/img/listLogo.png" alt="" />
</div>
<div>
<img src="img/grey.gif" dataimg="http://bulang123.cn/Skin/home/public/img/listLogo.png" alt="" />
</div>
<div>
<img src="img/grey.gif" dataimg="http://bulang123.cn/Skin/home/public/img/listLogo.png" alt="" />
</div>
<div>
<img src="img/grey.gif" dataimg="http://bulang123.cn/Skin/home/public/img/listLogo.png" alt="" />
</div>
<div>
<img src="img/grey.gif" dataimg="http://bulang123.cn/Skin/home/public/img/listLogo.png" alt="" />
</div>
<div>
<img src="img/grey.gif" dataimg="http://bulang123.cn/Skin/home/public/img/listLogo.png" alt="" />
</div>
<div>
<img src="img/grey.gif" dataimg="http://bulang123.cn/Skin/home/public/img/listLogo.png" alt="" />
</div>
</body>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bl.lazyload.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
lazyload.init({
anim:true,//开启动画
selectorName:".samLazyImg",//懒加载盒子
animtime:200//动画时间
});
</script>
</html>三、bl.lazyload.js部分：
/*
* selectorName，要懒加载的选择器名称
* extend_height 扩展高度
* anim 是否开启动画
* realSrcAtr 图片真正地址
* anim 动画时间*/
var lazyload = {
init : function(opt){
var that = this,
op = {
anim: true,
extend_height:0,
selectorName:"img",
realSrcAtr:"dataimg",
animtime:300
};
$.extend(op,opt);
that.img.init(op);
},
img : {
init : function(n){
var that = this,
selectorName = n.selectorName,
realSrcAtr = n.realSrcAtr,
anim = n.anim,
animtime = n.animtime;
// 判断要加载的图片是不是在指定窗口内
function inViewport( el ) {
// 当前窗口的顶部
var top = window.pageYOffset,
// 当前窗口的底部
btm = window.pageYOffset + window.innerHeight,
// 元素所在整体页面内的y轴位置
elTop = $(el).offset().top;
// 判断元素，是否在当前窗口，或者当前窗口延伸400像素内
return elTop >= top && elTop - n.extend_height <= btm;
}
// 滚动事件里判断，加载图片
$(window).on('scroll', function() {
$(selectorName).each(function(index,node) {
var $this = $(this);
if(!$this.attr(realSrcAtr) || !inViewport(this)){
return;
}
act($this);
})
}).trigger('scroll');
// 展示图片
function act(_self){
// 已经加载过了，则中断后续代码
if (_self.attr('lazyImgLoaded')) return;
var img = new Image(),
original = _self.attr('dataimg');
// 图片请求完成后的事件，把dataimg指定的图片，放到src里面，浏览器显示
img.onload = function() {
_self.attr('src', original);
anim && _self.css({ opacity: .2 }).animate({ opacity: 1 }, animtime);
};
// 当你设置img.src的时候，浏览器就在发送图片请求了
original && (img.src = original);
_self.attr('lazyImgLoaded', true);
}
}
}
};四、完整项目获取方法：
1、关注微信公众号“策码扬编”；
2、发送关键字“懒加载”；
热门推荐
最新文章
官方公众号