程序员之家|编程入门网|程序员网站|CSDN论坛|IT技术交流社区

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
查看: 391|回复: 0

手机页面下拉加载html源码

[复制链接]
  • TA的每日心情
    难过
    2018-5-24 18:11
  • 签到天数: 32 天

    [LV.5]常住居民I

    86

    主题

    142

    帖子

    1052

    积分

    版主

    Rank: 7Rank: 7Rank: 7

    积分
    1052

    活跃会员热心会员推广达人宣传达人灌水之王突出贡献优秀版主荣誉管理论坛元老

    发表于 2018-2-11 14:01:13 | 显示全部楼层 |阅读模式
    [HTML] 纯文本查看 复制代码
    <!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(pageHeight);
                // console.log(viewportHeight);
                // console.log(scrollHeight);
                return pageHeight - viewportHeight - scrollHeight < 20;
            }
    
            function doSomething(){
                var htmlStr = "";
                for(var i=0;i<20;i++){
                    htmlStr += "这是第"+index+"次加载<br>";
                }
                $('#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>




    上一篇:qq链接自动跳默认浏览器带参数
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|网站地图|小黑屋|csdn-程序员自己的网站 ( ICP17003512 )

    拒绝任何人以任何形式在本论坛发表与中华人民共和国法律相抵触的言论,本站内容均为会员发表,并不代表情鸽立场!

    本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场
    ----------------------------如有侵权、后门、不妥请联系本站删除---------------------------

    GMT+8, 2018-6-19 22:26 , Processed in 1.614950 second(s), 35 queries .

    csdn

    快速回复 返回顶部 返回列表