html页面原生js懒加载,原生js懒加载

原生js懒加载

原生js懒加载

div{width:100px;height:100px;background:#F00;margin-bottom:30px}

(function(){

//common

function tagName(tagName){

return document.getElementsByTagName(tagName);

}

function $(id){

return document.getElementById(id);

}

function addEvent(obj,type,func){

if(obj.addEventListener){

obj.addEventListener(type,func,false);

}else if(obj.attachEvent){

obj.attachEvent('on'+type,func);

}

}

//建立某些参数

var v={

eleGroup:null,

eleTop:null,

eleHeight:null,

screenHeight:null,

visibleHeight:null,

scrollHeight:null,

scrolloverHeight:null,

limitHeight:null

}

//对数据进行初始化

function init(element){

v.eleGroup=tagName(element)

screenHeight=document.documentElement.clientHeight;

scrolloverHeight=document.body.scrollTop;

for(var i=0,j=v.eleGroup.length;i

if(v.eleGroup[i].offsetTop<=screenHeight && v.eleGroup[i].getAttribute('asrc')){

v.eleGroup[i].setAttribute('src',v.eleGroup[i].getAttribute('asrc'));

v.eleGroup[i].removeAttribute('asrc')

}

}

}

function lazyLoad(){

if(document.body.scrollTop == 0){

limitHeight=document.documentElement.scrollTop+document.documentElement.clientHeight;

}else{

limitHeight=document.body.scrollTop+document.documentElement.clientHeight;

}

for(var i=0,j=v.eleGroup.length;i

if(v.eleGroup[i].offsetTop<=limitHeight && v.eleGroup[i].getAttribute('asrc')){

v.eleGroup[i].src=v.eleGroup[i].getAttribute('asrc');

v.eleGroup[i].removeAttribute('asrc')

}

}

}

init('img')

addEvent(window,'scroll',lazyLoad);

})()

本文来源于网络：查看 >https://blog.csdn.net/sinful/article/details/47837925