第一个轮子wlazyload插件。为了解决自己系统里面图片懒加载的简单插件

网上有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'})

目前只加了一个功能,就是懒加载的基本功能,后续完善插件再来跟新,希望有高手能指出代码如何去优化。


  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值