Question

所以说我有一个包含大量嵌入视频的页面，每个视频都有自己的div中包含的标题和描述。我只想在页面加载时加载4个div，然后有一个加载更多的按钮，每次点击将加载4个。除非我安装此功能，否则会有很多视频会真正放慢页面速度。我知道如何通过使用jQuery伪造它，但这对页面加载没有帮助。

我无论如何都不是Ajax专家，所以我真的只是想在这里朝着正确的方向前进。我不需要从数据库或任何东西加载。我只是从头开始构建页面。我是否将其他div存储在另一个页面中，然后在每次点击按钮时从那里加载/追加+4个div？

谢谢！

Answer 1

您可以将视频源的链接存储在JS阵列中（与页面一起加载），但是，一次只构建DOM 4个视频，（每次单击按钮，或每次滚动到页面末尾）。

例如，如果你加载了一个＆＃39;单击页面中的按钮 - 您的功能将使用适当的内容再创建4次潜水，并将其动态添加到DOM中。你只需要创建一些静态计数器来记住你还没有显示的视频的索引。

这不会影响您的网页加载时间，就像视频一样（因为来源只是文字）

编辑：如果您的视频源存储在某种类型的数据库中，则可以执行相同的操作，你只需要记住你当前的位置，并且每次只获取小数据。

看看那个简单的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'));
};

Answer 2

让我们一步一步来看。显然你有一个带有一些视频的文件夹，也有一个db可能是mysql，你已经存储了这些视频的路径。

首先在您的页面中使用像php这样的服务器端语言加载前4个视频，以便在页面加载后再使用ajax再次请求。

然后，由于您使用的是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
});

使用Ajax加载更多div内容

2 个答案: