滾動條到底自動加載數據

時間 2019-11-09

標籤滾動條到底自動加載數據简体版

原文原文鏈接

以前Google的圖片搜索結果界面提供了一個功能，即滾動條滾動到接近底部的位置自動加載剩餘圖片。我的以爲這個功能還蠻人性化的，避免來回翻頁的繁瑣，讓搜索結果以增量形式展示。因此也本身仿造了一個。功能是基於JQuery的。

下面是代碼。

$(window).scroll(function() { var o = $('#pincontainer'); // 並非全部頁面都要執行加載操做。
        // 你也能夠選擇別的識別條件。
    if(o!=null && o.length !=0){ //獲取網頁的完整高度(fix)
      var hght= window.scrollHeight; //獲取瀏覽器高度(fix)
      var clientHeight =window.clientHeight; //獲取網頁滾過的高度(dynamic)
      var top= window.pageYOffset || (document.compatMode == 'CSS1Compat' ? document.documentElement.scrollTop : document.body.scrollTop); //當 top+clientHeight = scrollHeight的時候就說明到底兒了
      if(top>=(parseInt(hght)-clientHeight)){ show(); } } }); //我所要執行的操做是把ajax取得的數據塞到目標div中
  function show(){ var target = $('#pincontainer'); if(!target){return false;} //通常你都要記錄一下你的數據的錄入狀態，好比到當前顯示頁碼
    var current_page = parseInt(target.attr('index')); //還要記錄一個最大顯示頁碼，以阻止請求溢出
    var max_page = parseInt(target.attr('maxPages')); if(current_page >= max_page){ return false; } var data={}; data.nextPage = parseInt(current_page)+1; var currentHref = window.location; // 有的時候可能還要從url中讀取參數，我使用正則式
    var tcaStr = new RegExp("(^|)tca=([^\&]*)(\&|$)","gi").exec(currentHref); if(tcaStr) data.tca = tcaStr[2]; var scaStr = new RegExp("(^|)sca=([^\&]*)(\&|$)","gi").exec(currentHref); if(scaStr) data.sca = scaStr[2]; var tagStr = new RegExp("(^|)tag=([^\&]*)(\&|$)","gi").exec(currentHref); if(tagStr) data.tag = tagStr[2]; // ajax請求數據
 jQuery.ajax({ type:"POST", url: "/show/getPins/", data:data, dataType: "json", beforeSend: function(XMLHttpRequest){ $("#loading").css('display',''); }, success:function(response) { if(response.data){ for(var i=0, length = response.data.length; i<length; i++){ var html = response.data[i]; var test = $(html); target.append(test); var img = test.find('img'); X.util.flowPin(img[0],188); } target.attr('index',parseInt(current_page)+1); $("#loading").css('display','none'); } }, error:function(){ alert("加載失敗"); } }); return false; }

這個功能的一個關鍵成敗點是scrollTop的計算。剛開始我只使用了document.body.scrollTop，可是這個數值在chrome中一直顯示0，因而有了上面的多瀏覽器兼容計算方法。javascript

        //獲取網頁滾過的高度(dynamic)
      var top= window.pageYOffset || (document.compatMode == 'CSS1Compat' ? document.documentElement.scrollTop : document.body.scrollTop);

改進：考慮到有些用戶並不喜歡自動加載的功能，能夠在頁面上添加「取消自動加載」的按鈕，換以按鈕控制。css

 
另外一個參考：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>jQuery實現當拉動滾動條到底部加載數據</title>
<style type="text/css">
*{margin:0;padding:0;}
body{font-size:14px;color:#444;font-family:"微軟雅黑",Arial;background:#fff;}
a{color:#444;text-decoration: none;}
a:hover{color:#065BC2;text-decoration: none;}
.clear{clear:both;}
img{border:none;vertical-align: middle;}
ul{list-style: none;}
</style>
</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
var totalheight = 0; 

function loadData()
{ 
    totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop()); 

    if ($(document).height() <= totalheight) 
    { 
        //加載數據
        $("#container").append($(document).scrollTop()+"<br/>");
    } 
} 

$(window).scroll( function() { 
    console.log("滾動條到頂部的垂直高度: "+$(document).scrollTop()); 
    console.log("頁面的文檔高度 ："+$(document).height());
    console.log('瀏覽器的高度：'+$(window).height());
    loadData();
}); 
</script>
</head>
<body>
    <div id="container">
        dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>dd<br/>
    </div>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。