原理是先將需要展示內容的div單獨提取出來，放到一個新的頁面，在需要展示的時候，直接通過AJAX請求頁面，然後展示，實現DIV懶加載，在數據多的時候可以將數據分成很多段，用戶滾動到需要展示的位置在加載，大大提高打開網頁的速度。
效果圖：
1.在沒有拉到底部的時候顯示一個gif加上提示語
2.在滾動條拉到底部的時候，加載下一頁內容
HTML：
<div id="tiezi">
//假如有一百條數據，這裏在用戶打開頁面的時候展示前10條
</div>
<div id="result">
@using (Ajax.BeginForm("TieziFenYe", "Original", new AjaxOptions()
{
HttpMethod = "POST",
InsertionMode = InsertionMode.InsertAfter,//這裏是指把得到的結果更新在id爲tiezi的div後面
UpdateTargetId = "tiezi",
}))
{
//pagenum：所有數據可以分多少頁（按一頁10條數據分）
//ViewBag.num：從後臺獲取所有數據的個數
int pagenum = ViewBag.num % 10;
if (pagenum == 0)
{
pagenum = ViewBag.num / 10;
}
else
{
pagenum = (ViewBag.num / 10) + 1;
}
<input type="hidden" id="pagenum" value="@pagenum" />
<input id="select" type="hidden" name="select" value="@train.select" />
<div class="loading">
<img id="loadingimg" class="img-responsive" style="margin-left:7%" src="../Content/images/loading.gif?version=1.1" alt="gif" />
<h2 style="margin-top:-30px;"><small id="tishi">下拉加載帖子...</small></h2>
</div>
<input id="page" type="hidden" name="page" value="2" />
<input type="submit" id="jiazai" style="display:none" />
}
JS:
script>
var pagenum = document.getElementById('pagenum').value;//總的分頁頁數
var i = 1;
/*這段是當整個頁面的高度和可見區域的高度相等是，即沒有滾動條出現的時候，直接把加載的GIF和提示的話隱藏*/
window.onload = function () {
var scrollHeight = $(document).height();
var windowHeight = $(this).height();
if (scrollHeight == windowHeight) {
document.getElementById('loadingimg').style.display = "none";
document.getElementById('tishi').innerHTML = "";
}
}
/*這段指 當前可見區域的高度+滾動條距離頂部的高度=整個頁面的高度，即滾動條滑到最底部的時候執行
假如有30行數據，pagenum=3， page往後臺傳的數據從2開始（因爲第一頁在打開頁面的時候就已經加載完成了），第一次傳2 即i=2， i<=pagenum 滿足條件，當用戶再次下拉的時候需要加載第三頁的數據，就要往後臺傳page=3，所有在傳之前把i+1，這樣傳的值就是3了，當用戶在次下拉的時候，由於數據只夠分三頁，在執行js的時候i=4 而pagenum=3
不滿足條件，就直接提示拉到底了 */
$(window).scroll(function () {
var scrollTop = $(this).scrollTop();//滾動條距離頂部的高度
var scrollHeight = $(document).height();//獲取整個頁面的高度
var windowHeight = $(this).height();//獲取當前可見區域的高度
if (scrollTop + windowHeight == scrollHeight) {
i = i + 1;
if (i <= (pagenum)) {
document.getElementById('jiazai').click();
var a = i + 1;
document.getElementById('page').value = a;
}
else {
document.getElementById('loadingimg').style.display = "none";
document.getElementById('tishi').innerHTML = "別拉了，再拉也加載不出帖子了";
}
}
}
);
</script>
後臺Controller：
//startnum ：查詢起始的數字
//num ：查詢結束的數字
public ActionResult TieziFenYe(string select, int page)
{
string style = train.style(select);
string cknum = "select count(*) from 表名 where style=@style";
num = (int)SqlHelper.ExecuteScalar(cknum, new SqlParameter("@style", style));/*獲取數據的總數*/
int startnum = num - (page * 10) + 1; /*page傳的第一個值爲2（page=1在第一次加載時完成） 因爲起始的數字都是1 11 21 這樣的 所有這裏要加1*/
num = startnum + 9; //結束的加上9,因爲設定一次加載十條數據
if (num == 0)/*一般不會發生，發生的條件爲前臺傳過來的page大於最大page，由於前臺限制如果page大於最大page，不執行JS 也傳不過來*/
{
return Content(" <script>alert('到底了！')</script>");//提示錯誤信息
}
if (num < 10)/*最後一頁數據不足10條時，得到的startnum爲負值，這裏將他強制變成1，代表從第一條開始，因爲數據我想按照時間順序排序，則時間最早的一條就是第一條*/
{
startnum = 1;
}
string showsr = "select * from(select *,row_number() over(order by id) as rownum from 表名where style=@style )a where rownum between @startnum and @num ORDER BY time DESC ";
DataTable dt = SqlHelper.ExecuteDataTable(showsr, new SqlParameter("@style", style), new SqlParameter("@startnum", startnum), new SqlParameter("@num", num));
return View(dt);
}
sql：
select * from(select *,row_number() over(order by id) as rownum from 表名 where style=@style )a where rownum between @startnum and @num ORDER BY time DESC
這句sql語句查詢表中指定順序的數據，它是先將數據查詢出來，然後使用rownum進行虛擬排序，具體可以百度rownum 。
假如有一百條數據，想要得帶40-50的數據，只需要將startnum 設爲40 num設爲50即可。
原文鏈接：lovecry.wang/Original/details?random=1c626be6-5bc7-4202-9ee1-f5aab783c891