• 评论的延迟加载(转载)


    看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>
  • 相关阅读:
    F2. Same Sum Blocks (Hard) 解析(思維、前綴和、貪心)
    E. Copying Data 解析(線段樹)
    B. Nauuo and Circle 解析(思維、DP)
    POJ3436-ACM Computer Factory(最大流)
    A.牛牛扔牌(双端队列)/B.疯狂过山车(最长上升子序列)/C.牛牛的棋盘(容斥原理)
    CodeForces 665E. Beautiful Subarrays(字典树)(贪心)(异或前缀和)
    CodeForces 455C.Civilization(并查集)(树的直径)
    CodeForces 1021B. Chemical table(并查集)
    CodeForces 961E. Tufurama(主席树)
    CodeForces 1024C. Array Product(模拟)(分类讨论)
  • 原文地址:https://www.cnblogs.com/yxlblogs/p/3588448.html
Copyright © 2020-2023  润新知