使用Ajax加載更多div內容

Question

可以這么說，我的頁面上有很多嵌入式視頻，每個視頻的標題和說明都包含在自己的div中。 我只希望4個div在頁面加載時加載，然后有一個加載更多按鈕，每次單擊時將加載4個以上。 除非安裝了此功能，否則會有很多視頻會真正減慢頁面速度。 我知道如何使用jQuery來偽造它，但這對頁面加載沒有幫助。

無論如何我都不是Ajax專家，所以我只是想在這里朝着正確的方向發展。 我不需要從數據庫或任何東西加載。 我只是從頭開始構建頁面。 我是否將其他div存儲在另一個頁面中，然后單擊每個按鈕從那里加載/追加+4 div？

謝謝！

Answer 1

您可以將視頻源的鏈接存儲在JS數組中（隨頁面一起加載），但是，一次僅每次4個視頻（每次單擊按鈕或滾動到頁面末尾）。

例如，如果您在頁面中放置一個“加載”按鈕，則在單擊該按鈕時-您的函數將使用適當的內容再創建4個潛水，並將它們動態添加到DOM中。 您只需要創建一些靜態計數器即可記住尚未顯示的視頻的索引。

這不會像視頻那樣影響您的頁面加載時間（因為來源僅為文本）

編輯：如果您的視頻源存儲在某種形式的數據庫中，則可以做同樣的事情，您只需要記住您的當前位置，並且每次僅獲取少量數據即可。

看看那個簡單的小提琴

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'));
};

Answer 2

讓我們一步一步地進行操作。顯然，您有一個包含一些視頻的文件夾，還有一個db可能是mysql，您已在其中存儲了這些視頻的路徑。

首先在頁面中使用服務器端語言（如php）加載前4個視頻，以防止在頁面加載后再用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加載文件並訪問video數組或對象即可。

例如，在json文件中，您可以執行以下操作：

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