0

たとえば、大量の動画が埋め込まれたページがあり、それぞれのタイトルと説明が独自の div に含まれているとします。ページの読み込み時に4つのdivのみを読み込み、クリックするたびにさらに4つ読み込むボタンをさらに読み込む必要があります。この機能をインストールしないと、ページの速度が大幅に低下するビデオがたくさんあるでしょう。jQuery を使用してそれを偽造する方法は知っていますが、ページの読み込みには役立ちません。

私は決して Ajax の専門家ではないので、ここで正しい方向に進められることを期待しています。データベースなどからロードする必要はありません。私はちょうどゼロからページを構築しています。追加の div を別のページに保存してから、ボタンをクリックするたびにそこから +4 div をロード/追加しますか?

ありがとう!

4

2 に答える 2

3

動画ソースのリンクを JS 配列 (ページと共に読み込まれる) に保存できますが、DOM は一度に 4 つの動画だけを構築できます (ボタンをクリックするたび、またはページにスクロールするたびに)。ページの最後)。

たとえば、ページに「ロード」ボタンを配置した場合、クリックすると、関数は適切なコンテンツでさらに 4 つのダイブを作成し、それらを動的に DOM に追加します。まだ表示していないビデオのインデックスを記憶するために、静的カウンターを作成するだけです。

これは、ビデオのようにページの読み込み時間には影響しません (ソースはテキストのみであるため)。

編集: ビデオ ソースが何らかの DB に保存されている場合も同じことができます。現在の位置を覚えておいて、毎回小さなデータのみを取得するだけで済みます。

その単純なフィドルを見てください

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 に答える