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>
  • 相关阅读:
    以太坊公开拍卖智能合约案例
    部署智能合约
    ERC20 Token
    查看crontab运行状态
    php把excel数值格式转成日期格式
    PHP识别中文编码并自动转换为UTF-8
    python中文件内容替换
    mysqldump备份指定的数据
    linux设置服务器时间
    git常用命令
  • 原文地址:https://www.cnblogs.com/yxlblogs/p/3588448.html
Copyright © 2011-2022 走看看