zoukankan      html  css  js  c++  java
  • 评论的延迟加载(转载)

    看verycd、cnbeta的评论区域很奇怪,每次看完了正文,再翻到评论区评论区都显示“正在加载评论”,稍等片刻才显示出来评论,评论的加载当然是用ajax实现的了,但是为什么不管是进入页面立即看评论区还是看帖子一段时间在看评论区都是看的时候才显示“正在加载评论”,好像不看它就不显示一样,难道真是哲学中的“看到的东西才存在”?

    经过研究源代码发现,原来是程序中在定时的做判断,判断评论区是否在显示范围之内,当处在显示范围之内才开始加载评论。下面的代码摘选自verycd的代码,仅供学习研究之用。

    判断div是否在浏览器可视范围之内的核心代码:

    var obj = document.getElementById('testDiv');
                var dom = (document.compatMode && document.compatMode == "CSS1Compat") ? document.documentElement : document.body;
                var scrollTop = dom.scrollTop || document.body.scrollTop || 0;
                if (obj.offsetTop - scrollTop - dom.clientHeight < 100) {
                    alert("处在可视范围之内了");
                }

    下面是实现的全部代码:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
    
        <script src="jquery-1.4.1.js" type="text/javascript"></script>
    
        <script type="text/javascript">
            function check() {
                var obj = document.getElementById('testDiv');
                var dom = (document.compatMode && document.compatMode == "CSS1Compat") ? document.documentElement : document.body;
                var scrollTop = dom.scrollTop || document.body.scrollTop || 0;
                if (obj.offsetTop - scrollTop - dom.clientHeight < 100) {
                    alert("开始AJAX加载评论数据了!");
                }
                else {
                    setTimeout("check()", 1000);
                }
            }
            setTimeout("check()", 1000);
        </script>
    
    </head>
    <body>
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <div id="testDiv">
            评论区域</div>
    </body>
    </html>
  • 相关阅读:
    mybatis中的#和$的区别
    error: 40
    SenseTime Ace Coder Challenge 暨 商汤在线编程挑战赛* B. 我觉得海星
    AtCoder Regular Contest 093 D
    AtCoder Regular Contest 092 D
    2018 蓝桥杯省赛 B 组模拟赛(五) 结果填空:藏宝图
    2018/3/22 美团在线笔试 编程题
    2018/3/22美团在线笔试
    2018 蓝桥杯省赛 B 组模拟赛(一)青出于蓝胜于蓝
    心情小记
  • 原文地址:https://www.cnblogs.com/yxlblogs/p/3588448.html
Copyright © 2011-2022 走看看