jqueryでdivの背景を切り替える前にイメージを読み込み

Question

私は、ユーザーのやりとりに応じてdivの背景イメージを切り替えたいWebページを持っています。私はこれまで持っていることは次のとおりです。

function updateImg() { 
    imgurl=buildImgURL(); // constructs a URL based on various form values 
    $('#mainImage').css("background-image", "url("+imgurl+")"); 
} 

これは、私はそれが一つのことを除いてしたい正確にように動作します。比較的大きな背景画像と比較的遅いサーバとの組み合わせ（いずれも容易に修正することができない）のために、画像が読み込まれるまでに時間がかかる。したがって、updateImg（）関数が呼び出されると、divは新しい背景画像がロードされる前に0.5秒間白くなります。私が望むのは、新しい画像が読み込まれてからすぐに切り替わるまで、古い背景画像が残っていることです。これは可能ですか？

バックグラウンドイメージはサーバーによって即座に生成されるため、クライアント側のキャッシュまたはプリロードは一切できません。

Answer 1

イメージを空の要素に設定するとどうなりますか？その後

$("<img id='loaderImg' src='"+imgUrl+"' onload='setBg(this.src)'/>"); 

画像が

function setBg(imgUrl) { 
    $("#mainImage").css("background-image", "url("+imgUrl+")"); 
    $("#loaderImg").remove(); 
} 

この方法でロードされ、画像が表示されることはありません画像にロードされ、背景に設定した画像が完全にロードされたときに（とされるだろうキャッシュ済み）

これはテストしていませんが、動作するはずです。

Answer 2

background-imageプロパティをイメージに設定してCSSクラスを定義し、updateImg（）関数で直接プロパティを変更する代わりにそのdivのクラスを設定することができます。これは問題を軽減するかもしれない。

のような何か：

あなたのCSSで

function updateImg() { 
    imgurl=buildImgURL(); // constructs a URL based on various form values 
    $('#mainImage').addClass('imageClassName'); 
} 

そして：

.imageClassName { 
    background-image: url([url to image]); 
} 

Answer 3

あなたのイメージをプリフェッチすることはできませんので、あなたがこれを行うことができます：

1. プリフェッチA」 loading .. "画像
2. あなたのdivの背景として「loading ..」画像を設定しますあなたの実際のイメージが利用可能になったら、実際のイメージは料理です
3. あなたのものをしてください。

jQueryを書くようにお願いします。それは十分に簡単です:)

乾杯、

jrh。