画像をプリロード / jQueryゼロから


画像のプリロードは前にもやったんだけど少し小技をはさんでみた。
プリロードしたって間に合わん時は間に合わんので、せめて見栄えが悪くないようにしようかってはなしです。

下記の感じで画像のプリロード時に読み込み完了後の処理を指定しちゃいます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var imagePath = '/images/';
var preloadImages = [
    'ooo.jpg',
    'xxx.jpg',
    '***.jpg'
];
var images = [];

(function($){
    for (var i = 0; i < preloadImages.length; i++) {
        var image = new Image;
        image.src = imagePath + preloadImages[i];
        images.push($(image).hide());
        (function(i){
            image.onload = function(){
                images[i].fadeIn();
            };
        })(i);
    }
})(jQuery);

読み込みが間に合わなかった時のために画像は hide() で非表示にして、image.onload で読み込み完了時の動作を指定しました。
※今回だとfadeInさせてます

サンプル

「画像をプリロード / jQueryゼロから」への1件のフィードバック

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です