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

来源：互联网发布：陈涌海知乎编辑：程序博客网时间：2024/04/28 16:02

网上有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.onscroll=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