<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
</head>
<body>
<div style="height:800px;width:100%;border:1px solid red"></div>
<div id="tip" style="height:150px;width:100%;background-color:gray;display:none;">加载中。。。</div>
<script>
/**
* param callback 加载事件触发时的操作
* param tips 提示信息处理
*/
ScrollLoader = function(callback, tips){
var isLoading = false;
window.onscroll = function (ev) {
if(isLoading) return;
var visiable_h = document.body.clientHeight;
var top = document.body.scrollTop;
var total_h = document.body.scrollHeight;
//当窗口可视区域+可视区域到文档顶部的距离 >= 整个文档的高度
if (visiable_h + top >= total_h - 5) {
isLoading = true;
tips.start();
setTimeout(function(){
tips.finish(callback);
isLoading = false;
}, 2000);
};
};
}
//-----------------用户代码--------------------
var num = 1;
function callback(){
for(var i=0;i<2;i++){
var element = document.createElement("div");
element.style.height = "100px";
element.style.width = "100%";
element.style.border = "1px solid blue";
element.style.margin = "3px auto";
if(num%2==0) element.style.backgroundColor = "green";
element.innerHTML = "第"+num+"次";
document.body.appendChild(element);
}
num++;
}
var tips = {
start:function(){
var tip = document.createElement("div");
tip.style.display = "block";
tip.style.height = "150px";
tip.style.width = "100%";
tip.style.backgroundColor = "gray";
tip.innerHTML = "加载中。。。";
//tip.className = "tip";
document.body.appendChild(tip);
//tip.style.top = (document.body.scrollTop + 150)+"px";
},
finish:function(callback){
var tip = document.body.lastChild;
//tip.style.display = "none";
document.body.removeChild(tip);
callback();
}
}
ScrollLoader(callback, tips);
</script>
</body>
</html>
