原生javascript代碼懶載入

標籤：name   透明   alpha   設定   return   載入   att   elements   dev   

1.先定義需要懶載入的樣式；

class="lazyload"

2.設定初始透明度為0.1；

.lazyload{

　　filter: Alpha(opacity=10); -moz-opacity:0.1; opacity:0.1;

}

3.把真正需要載入的真真實位址放在data-src屬性中；

src="懶載入圖片.png" data-src="真實圖片";

4.

前端開發周大偉同學JavaScript代碼編寫：

function lazyload(){　　

　　var lazyload=document.getElementsByClassName("lazyload");

　　window.addEventlistener("scroll",function(){

　　　　setTimeout(function(){

　　　　　　for(var i=0;i<lazyload.length;i++){

　　　　　　　　var _this=lazyload[i];

　　　　　　　　var clientHeight=document.documentElement.clientHeight || document.body.clientHeight;

　　　　　　　　var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;

　　　　　　　　if(clientHeight+scrollTop>=offsetTop(_this)){

　　　　　　　　　　_this.setAttribute("src",_this.getAttribute("data-src"));

　　　　　　　　　　_this.style.opacity="1";

　　　　　　　　}

　　　　　　}

　　　　},100);

　　});

}

//擷取offsetTop和offsetLeft值的js代碼(相容)

function offsetTop( elements ){ 
　　var top = elements.offsetTop; 
　　var parent = elements.offsetParent; 
　　while( parent != null ){ 
　　　　top += parent.offsetTop; 
　　　　parent = parent.offsetParent; 
　　}; 
　　return top; 
}; 

function offsetLeft( elements ){ 
　　var left = elements.offsetLeft; 
　　var parent = elements.offsetParent; 
　　while( parent != null ){ 
　　　　left += parent.offsetLeft; 
　　　　parent = parent.offsetParent; 
　　}; 
　　return parent; 
}; 

 

原生javascript代碼懶載入