原生js开发
1),prototype
html:
<ul>
<li>
<a href="">
<span class="lazy" data-original="img/4.jpg" style="background-image:url(img/1.jpg)">
</span>
</a>
</li>
<li>
<a href="">
<span class="lazy" data-original="img/4.jpg" style="background-image:url(img/1.jpg)">
</span>
</a>
</li>
<li>
<a href="">
<span class="lazy" data-original="img/4.jpg" style="background-image:url(img/1.jpg)">
</span>
</a>
</li>
<li>
<a href="">
<span class="lazy" data-original="img/4.jpg" style="background-image:url(img/1.jpg)">
</span>
</a>
</li>
<li>
<a href="">
<span class="lazy" data-original="img/4.jpg" style="background-image:url(img/1.jpg)">
</span>
</a>
</li>
<li>
<a href="">
<span class="lazy" data-original="img/4.jpg" style="background-image:url(img/1.jpg)">
</span>
</a>
</li>
</ul>
js:
(function (name, definition) {
if (typeof define === 'function') {
define(definition);
} else {
this[name] = definition();
}
})('LazyLoad', function () {
function LazyLoad(eleGroup){
this.eleGroup=null;
this.eleTop=null;
this.eleHeight=null;
this.screenHeight=null;
this.visibleHeight=null;
this.scrollHeight=null;
this.scrolloverHeight=null;
this.limitHeight=null;
}
LazyLoad.prototype.tagName=function(tagName){
return document.getElementsByTagName(tagName);
}
LazyLoad.prototype.addEvent=function(obj,type,func){
if(obj.addEventListener){
obj.addEventListener(type,func,false);
}else if(obj.attachEvent){
obj.attachEvent('on'+type,func);
}
}
LazyLoad.prototype.init=function(element){
var that = this;
that.eleGroup=that.tagName(element);
that.screenHeight=document.documentElement.clientHeight;//可视区域高度
that.scrolloverHeight=document.body.scrollTop;
for(var i=0,j=that.eleGroup.length;i<j;i++){
if(that.eleGroup[i].offsetTop<=that.screenHeight && that.eleGroup[i].getAttribute('data-original')){ that.eleGroup[i].style.backgroundImage ="url("+that.eleGroup[i].getAttribute('data-original')+")"; }
}
}
LazyLoad.prototype.lazyLoad=function(tag){ var that = this; that.eleGroup = document.getElementsByTagName(tag); if(document.body.scrollTop == 0){ that.limitHeight=document.documentElement.scrollTop+document.documentElement.clientHeight; }else{ that.limitHeight=document.body.scrollTop+document.documentElement.clientHeight; } for(var i=0,j=that.eleGroup.length;i<j;i++){ if(that.eleGroup[i].offsetTop<=that.limitHeight && that.eleGroup[i].getAttribute('data-original')){ that.eleGroup[i].style.backgroundImage = "url("+that.eleGroup[i].getAttribute('data-original')+")"; } } } function extend(target, source) { for (var key in source) { target[key] = source[key]; } return target; } return LazyLoad; });
调用:
var myLazyLoad = new LazyLoad();
myLazyLoad.init('span');
window.onscroll=function(){
myLazyLoad.lazyLoad('span');
}
2),oop
js:
(function (name, definition) {
if (typeof define === 'function') {
define(definition);
} else {
this[name] = definition();
}
})('LazyLoad', function () {
/**
* @LazyLoad this is for img-lazyload
* @author huangzhao 2016/12/10
*/
var LazyLoad = {
base:{
eleGroup:null, // 懒加载元素组
eleTop:null,
eleHeight:null,
screenHeight:null,
visibleHeight:null,
scrollHeight:null,
scrolloverHeight:null,
limitHeight:null,
oldOnscroll:null
},
init:function(element){ // 初始化的时候加载图片
this.base.eleGroup = this.tagName(element);
this.base.screenHeight = document.documentElement.clientHeight;//可视区域
this.base.scrolloverHeight = document.body.scrollTop;
for(var i=0,j=this.base.eleGroup.length;i<j;i++){ if(this.base.eleGroup[i].offsetTop<=this.base.screenHeight && this.base.eleGroup[i].getAttribute('data-original')){ this.base.eleGroup[i].style.backgroundImage ="url("+this.base.eleGroup[i].getAttribute('data-original')+")"; } } console.log(this.base.eleGroup); }, tagName:function(tagName){// lazy的class return document.getElementsByClassName(tagName); }, addEvent:function(obj,type,func){// 兼容事件 if(obj.addEventListener){ obj.addEventListener(type,func,false); }else if(obj.attachEvent){ obj.attachEvent('on'+type,func); } }, lazyLoad:function(){// 懒加载 if(document.body.scrollTop == 0){ this.base.limitHeight=document.documentElement.scrollTop+document.documentElement.clientHeight; }else{ this.base.limitHeight=document.body.scrollTop+document.documentElement.clientHeight; } for(var i=0,j=this.base.eleGroup.length;i<j;i++){ if(this.base.eleGroup[i].offsetTop<=this.base.limitHeight && this.base.eleGroup[i].getAttribute('data-original')){ this.base.eleGroup[i].style.backgroundImage = "url("+this.base.eleGroup[i].getAttribute('data-original')+")"; } } } } return LazyLoad; });
调用:
LazyLoad.init('lazy');
window.onscroll = function(){
LazyLoad.lazyLoad();
}