网上有lazyload的完整插件,但是用在我们系统里面总是有bug,所以,我觉得是他插件里面关于元素top值计算有问题,那么这么想就说干脆自己做一个简单的lazyloady插件吧,取名子wlazyload。
;(function($){
$.fn.wlazyload= function(option){
function getPageScroll() {
var xScroll, yScroll;
if (self.pageYOffset) {
yScroll = self.pageYOffset;
xScroll = self.pageXOffset;
} else if (document.documentElement && document.documentElement.scrollTop) {
yScroll = document.documentElement.scrollTop;
xScroll = document.documentElement.scrollLeft;
} else if (document.body) {
yScroll = document.body.scrollTop;
xScroll = document.body.scrollLeft;
}
function getscroll(lol,dota){
this.xscroll=lol;
this.yscroll=dota;
}
arrayPageScroll = new getscroll(xScroll,yScroll)
return arrayPageScroll;
};
function caltop(vrobj){
var vtop=vrobj.offsetHeight;
while(vrobj.offsetParent){
vtop+= vrobj.offsetTop;
vrobj = vrobj.offsetParent;
}
return vtop;
}
var gglazy=getPageScroll();
var screenheight=$(window).height();
var lazydata = {
lazyheight:100,
screenheight:screenheight
}
var that=this;
var options = $.extend(lazydata, option);
this.each(function(){
if(caltop(this)-gglazy.yscroll-options.screenheight<options.lazyheight && this.getAttribute("src")==undefined ){
this.src= this.getAttribute("data-origin");
}
return gglazy;
});
document.οnscrοll=function(){
gglazy=getPageScroll();
that.each(function(){
if(caltop(this)-gglazy.yscroll-options.screenheight<options.lazyheight && this.getAttribute("src")==undefined ){
this.src= this.getAttribute("data-origin");
}
return gglazy;
});
console.log('123');
}
}
})(jQuery);
上面就是我的插件的源码,但是我总是觉得在插件内部定义一个document.onscroll事件会影响性能。那么这个插件很简单,传入的参数有限。现在传一个lazyheight,表示当页面的图片距离浏览器的下方的位置lazyheight出开始加载。
使用方式
$('img').wlazyload();
当然,也可以设置参数
$('img').wlazyload({'lazyheight':200+'px'})
目前只加了一个功能,就是懒加载的基本功能,后续完善插件再来跟新,希望有高手能指出代码如何去优化。