JavaScript - プリロードイメージ

Question

私はフォトギャラリーで作業しています。メインイメージがロードされる前にGIFプリローダーを表示してからメインイメージを表示したいと思います。

だから、これは私が得たものである：

私はメインの写真を保持しているdiv要素である#photo_placeを持っています。これは、ユーザーが選択したサムネイルによって変わります。ユーザーは、サムネイルを選択した場合、この機能がトリガされます。

function gallery(icon){ 

    $('#photo_place').css('background-image','url("../images/'+icon+'.png")'); 

} 

さて、私が欲しいものを、まず、#photo_placeでプリローダーのGIFを表示することで、選択した画像における負荷...どこか、とそのイメージがロードされたら、プリローダーをメインイメージに置き換えます。

だからこのような何か？

function gallery(icon){ 
    $('#photo_place').css('background-image','url("../images/preloader.gif")'); 
    load.in.image'images/'+icon+'.png'; 

    if(load.in.image == true){ 
     $('#photo_place').css('background-image','url("loaded image")'); 
    } 
} 

もちろん、それは実際のJSではありませんが、そのようなものは正しく動作するはずですか？

アイデア？

ありがとうございました

Answer 1

おそらくこのようなものをお探しですか？

function gallery(icon) { 
    var preLoader = '../images/preloader.gif'; 
    var imagePath = '../images/' + icon + '.png'; 

    $('#photo_place').css('background-image','url("../images/preloader.gif")'); 

    var image = new Image(); 

    image.onload = function() { 
     $('#photo_place').css('background-image', imagePath); 
    } 
    image.src = imagePath; 
} 

また、チェックアウトImageクラスの参照：http://www.javascriptkit.com/jsref/image.shtml