html-滚动到底部自动加载

2021-06-19 15:05

阅读:288

标签:oct   ack   jquer   har   block   play   滚动   ons   off   

DOCTYPE html>
html>
head>
    title>无限翻页测试title>
    meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">script>
    style type="text/css">
    #spinner{
        position: fixed;
        top: 20px;
        left: 40%;
        display: block;
        color: red;
        font-weight: 900;
        background-color: rgba(80, 80, 90, 0.22);
        padding-top: 20px;
        padding-bottom: 20px;
        padding-left: 100px;
        padding-right: 100px;
        border-radius: 15px;
    }
    style>
head>
body>
    div id="sample">
    div>
    div id="spinner">
        正在加载
    div>
    script type="text/javascript">
        var index = 0;
        function lowEnough(){
            var pageHeight = Math.max(document.body.scrollHeight,document.body.offsetHeight);
            var viewportHeight = window.innerHeight || 
                document.documentElement.clientHeight ||
                document.body.clientHeight || 0;
            var scrollHeight = window.pageYOffset ||
                document.documentElement.scrollTop ||
                document.body.scrollTop || 0;
            // console.log(document.body.scrollHeight);
            // console.log(document.body.offsetHeight);
            // console.log(pageHeight);
            // console.log(viewportHeight);
            // console.log(scrollHeight);

            return pageHeight - viewportHeight - scrollHeight  20;
        }

        function doSomething(){
            var htmlStr = "";
            for(var i=0;i10;i++){
                htmlStr += "这是第"+index+"次加载
"; } $(#sample).append(htmlStr); index++; pollScroll();//继续循环 $(#spinner).hide(); } function checkScroll(){ if(!lowEnough()) return pollScroll(); $(#spinner).show(); setTimeout(doSomething,900); } function pollScroll(){ setTimeout(checkScroll,1000); } checkScroll(); script> body> html>

 

html-滚动到底部自动加载

标签:oct   ack   jquer   har   block   play   滚动   ons   off   

原文地址:http://www.cnblogs.com/lubenxin/p/7192289.html


评论


亲,登录后才可以留言!