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>

  • 相关阅读:
    jar包依赖整理(一)
    centos 下 tomcat 内存不足引起的错误
    KendoUI 基础:Grid 绑定template展示
    C#读取XML文件的五个步骤
    C#winform向Txt文件传值,不重复录入且不清空
    JS页面赋值
    Python3---对象编程思想
    Python3---标准库---numpy
    Python3---标准库json
    Python3---标准库sys
  • 原文地址:https://www.cnblogs.com/tanzhen/p/4677573.html
Copyright © 2011-2022 走看看