评论的延迟加载（转载）

看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>
posted @ 2014-03-08 19:04  学亮  阅读(272)  评论(0)  编辑  收藏  举报