如何使用客戶端瀏覽器滾動來加載HTML內容，就像Facebook主頁一樣？

我很新的網頁設計我想從你們的幫助如何使用客戶端瀏覽器滾動來加載HTML內容，就像Facebook主頁一樣？

我必須建立一個html頁面，從mysql數據庫服務器加載所有配置文件的詳細信息。但DB包含約1000人的個人資料的詳細信息。我需要顯示所有的細節。即時通訊使用PHP腳本作爲服務器端編程，我有代碼從DB檢索記錄和PHP代碼將生成HTML頁面，但它會加載所有1000人的個人資料。

但我想等加載在同一頁第50條記錄，後來onscrolling，負載未來的50條記錄中的Facebook訂閱頁面

PHP代碼爲我所用是

<html> 
<head> 
    <title></title> 
    <link rel="stylesheet" href="style.css" type="text/css"/> 
    <script src="jquery.js"></script> 

    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

</head> 
<body> 
    <div class="container"> 
     <div class="img_container"> 
      <div class="row"> 
       <ul> 
       <?php include 'connection.php'; 
        $query= "select name, orgn, des ,email ,photo_path from profile_info ;"; 
        $result=mysql_query($query); 
        while($row = mysql_fetch_array($result)){ 
       ?> 
        <li> 
         <a class="tooltip" href="#"><img src="<?php echo $row['photo_path']?>" alt="name"/> 
          <div> 
           <table> 
            <tbody> 
             <tr> 
              <td>Name</td> 
              <td>:</td> 
              <td><?php echo $row['name']?></td> 
             </tr> 
             <tr> 
              <td>Organisation</td> 
              <td>:</td> 
              <td><?php echo $row['orgn']?></td> 
             </tr> 
             <tr> 
              <td>Designation</td> 
              <td>:</td> 
              <td><?php echo $row['des']?></td> 
             </tr> 
             <tr> 
              <td>e-Mail</td> 
              <td>:</td> 
              <td><?php echo $row['email']?></td> 
             </tr> 
            </tbody> 
           </table> 
          </div> 
         </a> 
        </li> 
        <?php } ?> 


       </ul> 
      </div> 
     </div>

我只知道非常基本的html，js，jquery，css和php，我也經歷了以下答案，我無法做到我真正需要的東西。

Lazy load from database as user scrolls down page (similiar to Twitter and Facebook)

plz幫助我認爲這PLZ PLZ ....我不是一個好的程序員，我只需要這對我的學術項目..認罪:-)

來源

2014-05-20 Dixith Shetty

謝謝你:-)朋友 –

幫助快速谷歌爲「懶惰加載'，我發現這個jQuery插件。

http://www.appelsiini.net/projects/lazyload

只需下載和上傳包（藏漢如jQuery的）到您的服務器。

以下內容添加到您的<head>部分：

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

給你的圖片類如.lazy，這使得插件綁定到圖片：

<img class="lazy" data-original="img/example.jpg" width="640" height="480">

使用初始化插件以下功能：

$(function() { 
    $("img.lazy").lazyload(); 
});

來源

2014-05-20 03:22:39

更適合評論，或通過示例或其他內容展開。 – ElefantPhace

@Kay對不起...我編輯了我的帖子 –

-1

您n使用Ajax從php加載數據，而不是直接顯示它。你的ajax請求應該發送每行加載的行數到你的php頁面，然後它將以某種格式（最好是JSON）返回那些許多請求。然後，當ajax收到該響應解析json並加載「div」元素中的內容。那是基本結構。現在要動態加載數據，您可以使用jQuery的scroll()函數來確定何時到達最後一個元素。然後你的ajax函數在請求下一組行的時候被調用。既然你是新的，我建議你閱讀以下內容：

jQuery Offset turotial
jQuery Scroll Top
jQuery Scroll

他們會有所幫助。祝你好運:)

來源

2014-05-20 03:38:30

如何使用客戶端瀏覽器滾動來加載HTML內容，就像Facebook主頁一樣？

回答

相關問題