1

私はimageSliderに取り組んでいます.divを取得し、divの背景画像を設定しています。ページ読み込みの背景ページでは、画像の読み込みに時間がかかります。すべての背景画像を最初にキャッシュにロードする方法はありますか。ロードしたら、メインの Div を表示できます。

私はxmlファイルを読み込んでから、divの背景画像を1つずつ設定しています。

$('#myImageFlow').append('<div id="id'+k+'" alt="div'+k+'" class="sliderImage" width="280" height="310" style="visibility:hidden"> <div class="ffrontText" id="ff'+k+'">'+frontDiv[k]+'</div><div class="borderdiv" id="b'+k+'"></div><div class="borderdiv1" id="bd'+k+'"></div><div class="reflection" id="ref'+k+'"></div>  <div class="overlay" id="o'+k+'"></div></div>');

なにか提案を 。

ここに画像の説明を入力

4

1 に答える 1

0

2 つのパラメーター (画像ソース配列とコールバック) を持つ関数を作成し、すべての画像が読み込まれた後にコールバック関数を呼び出すことができます。

例：

preload_images = function(images, callback) {
    var images_count = images.length;
    var loaded_count = 0;
    $.each(images, function(index, src) {
        var image = $('<img src="' + src + '">');
        image.load(function() {
            loaded_count++;
            if (loaded_count == images_count && callback) {
                callback();
            }
        });
    });
}

preload_images(['1.jpg', '2.jpg', '3.jpg'], function() { // pass background images in array
    console.log('background images preloaded');
    // Show main div
});
于 2013-07-15T11:42:39.117 に答える