用Ajax加載更多的div內容

所以說我有一個包含大量嵌入式視頻的頁面，每個頁面都帶有標題和描述，這些標題和描述都包含在它們自己的div中。我只想要4個div加載頁面加載，然後加載更多的按鈕，每次點擊後會加載4個按鈕。除非我安裝此功能，否則將會有很多視頻會真正減慢頁面的速度。我知道如何使用jQuery來僞造它，但這對頁面加載沒有幫助。用Ajax加載更多的div內容

我不是一個Ajax專家，所以我真的只是想在這裏向正確的方向推動。我不需要從數據庫或任何東西加載。我只是從頭開始構建頁面。我是否將額外的div存儲在另一個頁面中，然後在每個按鈕單擊的情況下從那裏加載/附加+4 div？

謝謝！

來源

2013-09-25 user2415116

看一看http://api.jquery.com/load/ –

@LaurentWartel有用的，如果要覆蓋的內容一個div，在這種情況下你仍然需要使用它。 – Kiruse

你有存儲在數據庫中的視頻路徑嗎？ – Syd

你可以將視頻源的鏈接存儲在一個JS數組（負載與頁面），，但一次只能構建4個視頻（每次點擊一個按鈕或每個當你滾動到頁面的末尾）。例如，如果您在頁面中放置了一個「加載」按鈕，點擊後 - 您的函數將會創建4個適當內容的潛水，並將其動態添加到DOM中。您只需創建一些靜態計數器即可記住您尚未顯示的視頻索引。

這會不會影響你的頁面加載時間像視頻（因爲來源是純文本）

編輯：如果您的視頻源存儲在某種類型的DB同樣的事情可以做，你只需要記住你的當前位置，並且每次只能獲取小數據。

看看那麼簡單Fiddle

var videoSources = new Array("Src1","Src2","Src3","Src4","Src5","Src6","Src7","Src8","Src9","Src10","Src11","Src12","Src13","Src14","Src15","Src16"); 

var index = 0; 

function Load() 
{ 
    if(index == videoSources.length) 
     return; 
    var newElement = '<div class="Row">'; 
    for(var i=0; i< 4; i++) 
     newElement += '<div class="Video">'+videoSources[index++]+'</div>'; 
    newElement += '</div>'; 
    $(newElement).appendTo($('#Container')); 
};

來源

2013-09-25 14:28:45 avrahamcool

根據他/她的需要，這是完美的。它非常靜態，每次他/她添加新視頻時都需要更改源代碼，但這不應該成爲太大的負擔。 – Kiruse

那麼回顧一下，我不會爲此使用Ajax，而只是純粹的js/jQuery？我只是把所有額外的div放到一個js文件中並且每次點擊都將它附加到頁面上？ – user2415116

沒有。你把所有的鏈接放在**相同的**文件中，在一個JS數組中。和'點擊'，你構建新的DOM元素並動態地將它們添加到頁面中。 – avrahamcool

讓我們走到這一步的step.Apparently你有一個文件夾一些影片，也有可能分貝的mysql了保存的路徑這些視頻。

首先在您的頁面中加載前4個視頻，使用php等服務器端語言，以防止在您的頁面加載後使用ajax再發出1個請求。

然後因爲你使用jQuery，你可以使用下面的代碼

/* JS */

var totalVideos = 4; 

function getImages(){ 

    var request = $.ajax({ 
     url: "getVideos.php", 
     type: "POST", 
     data: { last : totalVideos }, 
     dataType: "json" 
    }); 

    request.done(function(videos) { 
     renderVideos(videos); 
     totalVideos += 4; 
    }); 

    request.fail(function(jqXHR, textStatus) { 
     alert("Request failed: " + textStatus); 
    }); 

} 

function renderVideos(vids){ 

    var html = ''; 

    for (var i = vids.length - 1; i >= 0; i--) { 

     var video = // Create the video html code here based on your needs. 


     html += video; 
    } 

    $('#yourVideoContainer').append(html); 
} 

$(document).ready(function(){ 

    $('#moreVideos').click(function(){ 
     getImages(); 
    }) 

})

/* PHP */

if (isset($_POST['last']) && is_numeric($_POST['last'])) { 
    getVideos(intval($_POST['last']); 
} 

function getVideos(last) { 

     global $db; // This is your database conection object assuming it is global. 

     $query = 'SELECT * FROM videos LIMIT 4 OFFSET :last ORDER BY videos.id DESC'; 
     if ($statement = $db->prepare($query)) { 

      $statement->bindParam(':last', last); 
      $statement->execute(); 
      $result = $statement->fetchAll(PDO::FETCH_ASSOC); 

      if(count($result) > 0){ 
       header('Content-Type: application/json'); 
       echo json_encode($result); 
       return; 
      } 
     } 

     header("HTTP/1.0 666 Someone stole your vids"); 
}

如果你不想使用數據庫和服務器端語言你可以在你的項目中使用一個簡單的JS或JSON文件，所有的視頻信息將被存儲。然後，只需加載文件通過javascript和訪問視頻數組或對象。

例如，在JSON文件情況下，你可以這樣做：

$.getJSON("videos.json", function(json) { 
    console.log(json); // this will show the info it in firebug console 
});

來源

2013-09-25 15:04:34 Syd

用Ajax加載更多的div內容

回答

相關問題