Ajax页面看到才加载,实现按需加载

类似于淘宝上面的商品评论,用户看到那里的时候才加载相应内容,这样可以节约服务器资源和页面加载速度.

Ajax页面看到才加载,实现按需加载

实现原理很简单:运用setTimeOut()每隔1秒检测一次用户看到那个位置了,然后判断当前位置是否快到评论位置了,如果是,则触发ajax来加载内容,不是的话就继续循环.

页面代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        #body
        {
            width: 900px;
            border: solid 2px gray;
        }
        #header, #footer
        {
            width: 500px;
            height: 900px;
            background: #d4d4d4;
        }
    </style>

    <script src="../js/jquery-1.4.2.js" type="text/javascript"></script>

    <script type="text/javascript">
        function check() {
            var obj = document.getElementById("body");//评论的控件
            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) {//判断
                /////////////触发ajax/////////////
                $("#sp1").html("");
                $.post("GetCommentData.ashx", { "action": "commentDataPage", "page": 1, "pagesize": 20 }, function(data, status) {//取数据
                    if (status == "success") {
                        var comments = $.parseJSON(data); //JSON序列化数据
                        for (var i = 0; i < comments.length; i++) {
                            var comment = comments[i];
                            var li = $("<li>" + comment.name + "   " + comment.uptime + "  " + comment.content + "</li>");
                            $("#ulComment").append(li); //分别添加到页面上
                        }
                    }
                });
            ///////////////////结束ajax////////////////
            }
            else {
                setTimeout("check()", 1000);//循环
            }
        }
        setTimeout("check()", 1000);
    </script>

</head>
<body>
    <div id="header">
        <h1>
            这里是新闻内容</h1>
    </div>
    <div id="body">
    <span id="sp1">评论区:加载中...</span>
    
        <ul id="ulComment">
        </ul>
    </div>
    <div id="footer">
        <h2>
            这里是页脚</h2>
    </div>
</body>
</html>

服务器代码同无刷新分页.

秒客网

Ajax页面看到才加载,实现按需加载

相关文章