0

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

无论如何，我都不是 Ajax 专家，所以我真的只是希望在这里被推向正确的方向。我不需要从数据库或任何东西加载。我只是从头开始构建页面。我是否将额外的 div 存储在另一个页面中，然后在每次单击按钮时从那里加载/附加 +4 div？

谢谢！

4

2 回答 2

3

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

例如，如果您在页面中放置一个“加载”按钮，当您单击时 - 您的函数将创建 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'));
};
于 2013-09-25T14:28:45.273 回答
0

让我们一步一步来。显然，您有一个包含一些视频的文件夹，还有一个数据库，可能是 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 加载文件并访问视频数组或对象。

例如，在 json 文件的情况下，您可以这样做：

$.getJSON("videos.json", function(json) {
    console.log(json); // this will show the info it in firebug console
});
于 2013-09-25T15:04:34.413 回答