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