首頁 > 開發者 > 網站開發

滾動式載入伺服器端內容——例子，滾動式載入伺服器端

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

滾動式載入伺服器端內容——例子，滾動式載入伺服器端

網頁代碼如下

<!doctype html><html><head><meta charset="utf-8"><title>滾動式載入</title><style>* {margin:0; padding:0; border:0;}#container {width:960px; margin:auto;}#container:after {display:block; height:0; content:''; clear:both;}.item {width:300px; height:200px; float:left; margin:10px; background-color:yellow;}</style></head><body><div id="container">  <div class="item">1</div>  <div class="item">2</div>  <div class="item">3</div>  <div class="item">4</div>  <div class="item">5</div>  <div class="item">6</div>  <div class="item">7</div>  <div class="item">8</div>  <div class="item">9</div>  <div class="item">10</div>  <div class="item">11</div>  <div class="item">12</div></div><script>var time = new Date() * 1;  // 擷取目前時間數值window.onscroll = function(){h_window = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; // 擷取視口高度h_document = document.documentElement.scrollHeight || document.body.scrollHeight;  // 擷取網頁高度h_scroll = document.documentElement.scrollTop || document.body.scrollTop;  // 擷取頁面的滾動高度var times = 0; // 成功請求的次數var xhr = new XMLHttpRequest();xhr.onreadystatechange = function(){if(xhr.readyState == 4){if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){// 在container最後一個子項目後面插入返回的HTML代碼document.getElementById('container').insertAdjacentHTML('beforeEnd', xhr.responseText);times++;}}};xhr.open('get', 'scrolltoload.php', true);// 當 此次滾動於上次滾動間隔大於100毫秒 且 頁面滾動高度+視口高度 > 網頁高度 - 一個固定數值 時，載入新內容if((new Date() * 1 - time > 100) && (h_window + h_scroll > h_document - 50)){time = new Date() * 1;xhr.send(null);}};</script></body></html>


php檔案代碼如下 

<div class="item">Ajax1</div><div class="item">Ajax2</div><div class="item">Ajax3</div><div class="item">Ajax4</div><div class="item">Ajax5</div><div class="item">Ajax6</div>



本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More