js寫無限加載

(function(){
	var content = document.getElementsByClassName("content")[0];
	var footer = document.getElementsByTagName("footer")[0];
	var winh = window.innerHeight - footer.offsetHeight;
	//console.log(winh);Height高度905-footer的高度
	var ul = document.getElementById("like-ul");
	var isFninsh = false;


	/*
	 * describe: 建立加載的文檔碎片，而且插入到content
	 * arguments : content , 要插入到的容器
	 * return ：返回插入的div
	*/
	//appendLoading 自定義
	function appendLoading(content){
		var fragment = document.createDocumentFragment();
		var wrap = document.createElement("div");
		var img = document.createElement("img");
		var span = document.createElement("span");

		wrap.className = "loading";
		img.src = "img/icon_loading.png";
		span.innerHTML = "正在加載";

		wrap.appendChild(img);
		wrap.appendChild(span);
		fragment.appendChild(wrap);
		content.appendChild(fragment);

		return wrap;
	}

	//往content插入文檔碎片
	//append() 方法在被選元素的結尾(仍然在內部)插入指定內容。
	//Loading裝載
	var loading = appendLoading(content);
	var loadTop = 0;

	//判斷正在加載是否出如今屏幕
	//addEventListener() 方法用於向指定元素添加事件
	//scroll當用戶滾動指定的元素時,會發生 scroll 事件
	content.addEventListener("scroll",function(){

		// getBoundingClientRec 獲取元素距離瀏覽器周邊的位置的方法
		loadTop = loading.getBoundingClientRect().top;

		//判斷loadTop小於winh的高度而且只執行一次
		if(loadTop < winh && !isFninsh){//isFinish執行一次
			//ajaxLoad();
			isFninsh = true;//開關
		}
	});
}());

　　

/* loading 無限加載*/
.loading{
height:0.9375rem;
line-height:0.9375rem;
text-align: center;
background: #f7f7f7;
color:#ccc;
}

.loading img{
display: inline-block;
height:0.625rem;
-webkit-animation: loading 1s linear infinite ;
animation: loading 1s ease linear infinite ;
}

@keyframes loading{
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg);}
}

.loading *{
vertical-align: middle;
}