滚动加载2

时间：2015-04-02 09:06:08 收藏：0 阅读：104
<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>