画像を読み込んだ時に何か処理をしたいと思って、jQueryなんかで$(‘img’).onload( function () { console.log(‘読み込んだ！’); } ); みたいな処理を書くことがあるかと思うのですが、画像がブラウザキャッシュから読み込まれたときはこの処理は動きません。これを動くようにする解決方法を書きます。

loadイベントが動かない原因

imgのonloadイベントが動かない原因は、ブラウザがキャッシュから読み込んだ時はonloadイベントを発火させないからです。

解決方法

色々批判はある（あまりエレガントな方法ではない）と思うのですが、小さい画像ならこの方法で解決します。

基本的なアイデアは、「srcにランダムな文字列を追加して再設定して、強制的にキャッシュ以外から読み込ませる」というものです。

jQuery使って書いてますが、基本的には同じです。

(function() {
    $(document).ready(function() {

        // 対象となる画像のjQueryオブジェクト
        $img = $('#my-image');

        // 元のsrcを覚えておく
        var origSrc = $img.attr('src');

        // イベントをバインド
        $img.on('load', function() {
                // やりたいことをここに書く
                console.log($(this).attr('src') + ' : 読み込んだよ！');
        });

        // src属性をクリア
        $img.attr('src', '');

        // ランダムな文字列を付けてsrcを設定
        $img.attr('src', origSrc + '?v=' + Math.random());

})($);

こうすると、画像はキャッシュから読み込まれず必ずインターネットから読み込むので、loadイベントが必ず発生します。

でもあんまり…

この方法だと、キャッシュが利かなくなるのでモバイル時代の今としてはあんまりエレガントではないし、下手すりゃ「ギガ泥棒」って批判されそうな方法だなと思います。

もっと他に良い方法（例えばPromiseオブジェクトを使った方法とか）がありそうな気がしますので、また何か思いついたら試してみようと思います。