jQueryで画像をプリロードする

2015.05.12

jQueryで画像をプリロードする方法を試してみます。

サンプルコード

プリロード実装前のサンプルです。

HTML

1
2
3
4
<ul>
    <li><img src="01_off.jpg" width="800" alt="" /></li>
    <li><img src="02_off.jpg" width="800" alt="" /></li>
</ul>

JavaScript

1
2
3
4
5
6
7
$(function() {
    $('img[src *= "_off"]').hover(function() {
        $(this).attr('src', this.src.replace('_off','_on'));
    }, function() {
        $(this).attr('src', this.src.replace('_on','_off'));
    });
});

プリロード実装前のデモページ
　

サンプルコード

プリロード実装後のサンプルです。

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 画像をプリロードする関数
function jqueryPreload(imgSrc) {
    $('<img>').attr('src', imgSrc);
}
$(function() {
    // プリロードする画像を選択
    $('img[src *= "_off"]').each(function() {
        // プリロードする画像srcを取得
        var imgSrc = $(this).attr('src').replace('_off','_on');
        // プリロード実行
        jqueryPreload(imgSrc);
    });
 
    $('img[src *= "_off"]').hover(function() {
        $(this).attr('src', this.src.replace('_off','_on'));
    }, function() {
        $(this).attr('src', this.src.replace('_on','_off'));
    });
});

プリロード実装後のデモページ
　

サンプルコード

色々なサイトを見ていると、以下のように実装していることが多いようでした。

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(function() {
    jQuery.preloadImages = function() {
        for(var i = 0; i < arguments.length; i++) {
            jQuery('<img>').attr('src', arguments[i]);
        }
    };
    $.preloadImages('01_on.jpg', '02_on.jpg');
 
    $('img[src *= "_off"]').hover(function() {
        $(this).attr('src', this.src.replace('_off','_on'));
    }, function() {
        $(this).attr('src', this.src.replace('_on','_off'));
    });
});

プリロード実装後のデモページ2
最初に見たとき、argumentsという配列がどこから出てきたのか謎だったのですが、調べてみると関数へ渡された引数を配列のように扱えるオブジェクトらしいです。
　

【参考サイト】

　

関連記事

コメントを残す

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

CAPTCHA


コメントが承認されるまで時間がかかります。

Category

Tag

Recent

2025年3月
日 月 火 水 木 金 土
 1
2345678
9101112131415
16171819202122
23242526272829
3031