3

私はフォト ギャラリーに取り組んでいます。メイン イメージが読み込まれる前に gif プリローダーを表示してから、メイン イメージを表示する機能が必要です。

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

#photo_placeメインの写真を保持する div があります。これは、ユーザーが選択したサムネイルによって異なります。ユーザーがサムネイルを選択すると、次の関数がトリガーされます。

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 ではありませんでしたが、そのようなものは正しく動作するはずですか?

何か案は？

ありがとう

4

1 に答える 1

5

おそらくあなたはこのようなものを探していますか？

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;
}

画像クラスリファレンスもチェックアウト：http ：//www.javascriptkit.com/jsref/image.shtml

于 2012-05-05T19:11:30.777 に答える