3

4つのスライドギャラリーを作成しようとしていますが、画像をギャラリー形式で表示する前に、すべての画像をスプラッシュ画面の背後にプリロード（キャッシュ）する必要があります。「jPreLoaderv2- http://www.inwebson.com/jquery/jpreloader-a-preloading-screen-to-preload-images」を使おうとしていますが、うまくいきませんでした。

以下のコードは、各ギャラリーディレクトリからjpreloaderの背後にある単一のギャラリーにすべての画像をプリロードし、ロードが完了したらギャラリー全体を削除して、一度に各ギャラリーを表示する方法です。

var pictures =  [
    "1.jpg",
    "2.jpg",
    "3.jpg",
    "4.jpg",
    .......,
    "30.jpg"
 ]

$(window).load(function(){

preLoad();

function preLoad(){
    var max = 30;
    var pic;
    picture = '<table id="table" style="dipslay:table;"><tr>';
    for (var i=0;i < max; i++){
        if(i < 30){
            pic = "images/art/"+pictures[i];
            appendCell(pic);
        }
        if(i < 17){
            pic = "images/street/"+pictures[i];
            appendCell(pic);
        }
        if(i < 19){
            pic = "images/doc/"+pictures[i];
            appendCell(pic);
        }
        if(i < 16){
            pic = "images/commercial/"+pictures[i];
            appendCell(pic);
        }
    };
    picture += '</tr></table>';
    $('#imageScroller').append(picture);
}

function appendCell(pic){
    picture +="<td class='image'><img class='i' src='"+pic+"'></td>";
    return;
}
});

すでにdomに挿入されているのではなく、上記の動的画像読み込みループにjpreloaderを実装する方法がよくわかりません。

$(document).ready(function () {
$('body').jpreLoader();
});

ありがとう。

4

1 に答える 1

7

画像がダウンロードされると更新されるカスタムプログレスバー

var pictures = [
                    "1.jgp",
                    "2.jpg"
                ];

var loadedSoFar = 0;

function loaded( ) {
    // do stuff
}

function updateProgress( ) {

    loadedSoFar++;

    var newWidth = $("#progress").width() * ( loadedSoFar / pictures.length );
    $("#bar").stop( true, true );
    $("#bar").animate({ width: newWidth }, 500, function( ) {
        if( loadedSoFar === pictures.length ) { loaded() }
    });
}

for( var i = 0; i < pictures.length; i++ ) {
    var img = new Image();
    img.src = pictures[ i ] + i;

    img.onload = function( ) {
        updateProgress();
    }
}

こちらのデモ

于 2012-12-21T01:14:00.157 に答える