lazyload懒加载的使用

2019-06-17 本文已影响0人我只是一个小前端

1.引用<script src="http://a.tbcdn.cn/apps/baron/js/??lib/tmm/tmm.js,lib/lazyload/lazyload.js?20121015"></script>

2.对于要懒加载的图片进行如下属性设置。<img src="http://a.tbcdn.cn/mw/webapp/fav/img/grey.gif" dataimg="http://img03.taobaocdn.com/tps/i3/T1xl4_FlFaXXcLmU_5-305-317.png" />

其中src为未加载时的图片，dataimg为实际要加载的图片。

3.执行lazyload.init();

4.分tab的懒加载。判断tab把下面的图片有没加载过。根据loaded属性判断，还要对非当前tab所属的图片进行class lazy去掉。对已加载的loaded为true的图片，不加lazy属性

5.注意lazyload.init()的执行时机，如果在dom ready阶段执行，会下载所有图片，不能实现懒加载。要在winow.onload完成这个阶段去执行。

lazyload.js代码解读：

/**

* 基于jQuery或者zeptoJS的惰性加载

var lazyload = {

init : function(opt){

var that = this;

var op = {

anim: true,

extend_height:400

};

// 合并对象，已有的{anim:true}+用户自定义对象。也就是op = op + opt

$.extend(op,opt);

// 调用lazyload.img.init(op)函数

that.img.init(op);

img : {

init : function(n){

var that = this;

console.log(n);

// 要加载的图片是不是在指定窗口内

function inViewport( el ) {

// 当前窗口的顶部

var top = window.pageYOffset

// 当前窗口的底部

var btm = window.pageYOffset + window.innerHeight

// 元素所在整体页面内的y轴位置

var elTop = $(el).offset().top;

// 判断元素，是否在当前窗口，或者当前窗口延伸400像素内

return elTop >= top && elTop - n.extend_height <= btm

}

// 滚动事件里判断，加载图片

$(window).bind('scroll', function() {

$('img.lazy').each(function(index,node) {

var $this = $(this)

if(!$this.attr('dataimg')){

return

}

if ( !inViewport(this) ) return

act($this)

})

}).trigger('scroll')

// 展示图片

function act(_self){

// 已经加载过了，则中断后续代码

if (_self.attr('loaded')) return;

var img = new Image(), original = _self.attr('dataimg')

// 图片请求完成后的事件，把dataimg指定的图片，放到src里面，浏览器显示

img.onload = function() {

_self.attr('src', original).removeClass('lazy');

n.anim && _self.css({ opacity: .2 }).animate({ opacity: 1 }, 280);

}

// 当你设置img.src的时候，浏览器就在发送图片请求了

original && (img.src = original);

_self.attr('loaded', true);

}

};

<!doctype html>

<head>

<title>懒加载实例</title>

/*一定要有预先高度*/

img{

width: 600px;

height: 260px;

}

</style>

</head>

<body>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

</body>

var lazyload = {

init : function(opt){

var that = this,

op = {

anim: true,

extend_height:0,

selectorName:"img",

realSrcAtr:"dataimg"

};

// 合并对象，已有的{anim:true}+用户自定义对象。也就是op = op + opt

$.extend(op,opt);

// 调用lazyload.img.init(op)函数

that.img.init(op);

img : {

init : function(n){

var that = this,

selectorName = n.selectorName,

realSrcAtr = n.realSrcAtr,

anim = n.anim;

// console.log(n);

// 要加载的图片是不是在指定窗口内

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 }, 280);

};

// 当你设置img.src的时候，浏览器就在发送图片请求了

original && (img.src = original);

_self.attr('lazyImgLoaded', true);

}

};

* selectorName，要懒加载的选择器名称

* extend_height 扩展高度

* anim 是否开启动画

* realSrcAtr 图片真正地址*/

lazyload.init({

anim:false,

selectorName:".samLazyImg"

});

</script>

</html>

lazyload懒加载的使用

猜你喜欢

热点阅读