<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div style="height:800px;width:100%;border:1px solid red"></div>
<div id="tip" style="height:150px;width:200px;position:absolute;background-color:gray;display:none;z-index:999;left:300px;">加载中。。。</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(){
callback();
isLoading = false;
tips.finish();
}, 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.getElementById("tip");
tip.style.display = "block";
tip.style.top = (document.body.scrollTop + 150)+"px";
},
finish:function(){
var tip = document.getElementById("tip");
tip.style.display = "none";
}
}
ScrollLoader(callback, tips);
</script>
</body>
</html>
时间： 2024-12-18 04:29:31