JavaScriptで画像をプリロード


2012.01.09追記
読み込み後にエフェクト入れたものはこちら

JavaScriptで動的にタグを書きだしたりすると、その部分の画像が表示されてから読み込まれるのであらかじめ読み込んでおこうというよくある話。
とりあえず画像を配列とかに指定、パスは /images 配下に固定で。
(function(){…})() に記述するのは、他のJavaScriptとか読み込む時に変数名とか重複しないよう念の為。

1
2
3
4
5
6
7
8
9
10
11
(function(){
    var preloadImages = [
        'ooo.jpg',
        'xxx.jpg',
        '***.jpg'
    ];

    for (var i = 0; i < preloadImages.length; i++) {
        (new Image()).src = '/images/' + preloadImages[i];
    }
})();

HTML読み込み時じゃなくて、onload後とかが良ければ下記みたいな感じ。
※jQuery使います

1
2
3
4
5
6
7
8
(function($){
    var preloadImages = [...];
    $(function(){
        for (var i = 0; i < preloadImages.length; i++) {
            (new Image()).src = preloadImages[i];
        }
    });
})(jQuery);

「JavaScriptで画像をプリロード」への1件のフィードバック

コメントを残す

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

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>