divに背景イメージをあらかじめロードしますか？

Question

私はdivの背景に画像を使用して、スライドとして背景画像の値が更新されるインクリメントスライドショーを作成しました：

<div id="imageBoxContainer" style="background-image: url('<?php echo $image_url[0]; ?>');"> 


function incrementSlide(){ 
    $('#imageBoxContainer').css("background-image", "url(" + theNextSlide + ")"); 
} 

問題はときに、背景画像の変更、それが白であること、ですイメージが完全に読み込まれる数秒前に。

上記のアーキテクチャを使用して背景イメージをプリロードすることはできますか？

Answer 1

はい、あなたのアプローチに類似した方法で実現できます。あなたの画像を使って、divや画像要素（背景画像と同じくらい多く）を背景やsrcに追加するだけです。しかし、これらの要素は表示されないように見えないようにしてください。その後、すべての画像がキャッシュされ、jsは遅延なしで動作します。

<?php foreach($image_url as $image) {?> 
<div class="imageBoxContainerCache" style="visibility: hidden; background-image: url('<?php echo $image_url[0]; ?>');"> 
<?php } ?> 


function incrementSlide(){ 
    $('#imageBoxContainer').css("background-image", "url(" + theNextSlide + ")"); 
} 

Answer 2

私はjQueryを使ってプリロード機能を使用して終了：

$.fn.preload = function() { 
    this.each(function(){ 
     $('<img/>')[0].src = this; 
    }); 
} 

// Usage: 

$(['img1.jpg','img2.jpg','img3.jpg']).preload(); 

は、それが思わ魅力のように作業します！