Web制作メモ -トップへ-

[jQuery] imageオブジェクトを使って画像を非同期にロードする

JavaScript2015.03.10 14:01

画像オブジェクトはImage()を使って作成します。

Image()で作成した画像オブジェクトのsrcに画像ファイルのURLを指定すれば、画像を非同期にロードできます。

また、画像オブジェクトのloadイベントを使えば、画像がロードされた時点で処理をすることができます。

画像を非同期にロードする

$("input").click(function(){
    var img = new Image();
    img.src = "sample.jpg";
    $(img).on("load", function() {
        // 画像がロードされた時の処理
    });
});

サンプル

[jQuery] imageオブジェクトを使って画像を非同期にロードするサンプル - こんびた日記
※「画像をロードする」をクリックするとサンプル画像を読み込んで表示します。