類似於淘寶上面的商品評論,用戶看到那裏的時候才加載相應內容,這樣可以節約服務器資源和頁面加載速度.
實現原理很簡單:運用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>
服務器代碼同無刷新分頁.