lazyload-图片懒加载控件开发

原生js开发

<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>

(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.protot
e416
ype.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');
}

(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();
}