画像のLOADイベント

HTMLで画像加工処理をJavaScriptでプログラムしたときに、次の編集画面から戻ったら画像クリックイベントが利かない。

その時のコードが
[HTMLの該当箇所]

<div class="edit-image-area">
    <img src="./example.png" id="editImage" alt="edit image">
</div>

[JavaScriptの処理] ** jQueryを利用しています **

//画像のロードイベント登録
$('img#editImage').on('load', function(e) {
    //画像が読み込まれたらマウスイベント登録
    $('#editImage').on('click', function(e) {
        //色々な処理
    });
});

処理の流れは
<編集画像をアップロード> — <最初の画像編集> — <次の画像編集>

で、アップロード後の<最初の画像編集>では画像上のマウスイベントは登録されるが、<次の画像編集>にいって
戻ってくると、イベントが登録されない。

イベント登録の際に画像が読み込まれてから登録しているが、
戻ってきたときはキャッシュから画像が読み込まれた後に
$(‘img#editImage’).on(‘load’, function(e){}); が登録されるため、永久に処理されません。
つまり、onload登録したときは、すでにonload状態なのでこのイベント関数は呼ばれない。

この場合の解決策は2つ。
———————————————————————————
1. IMG 要素の SRCにセットする画像ファイル名を常にユニークにする。
引数でユニークなコードを与えればOK
例えば、src=”./exaple.png?t=36273428″ などと必ずユニークになる引数を与える。

2.IMG要素のSRC属性を空にして、画像の読み込みをJavaScriptで行う。
———————————————————————————
項番1.は処理が簡単だが、画像が同じなのに毎回サーバーから読み込まれるので、エコではない。
さらに、スマートでもない。 なので、採用しない。

項番2.の方法がスマートで且つ環境にやさしい。

という事で書き直したソースは以下になります。

[HTMLのサンプルコード]

<!DOCTYPE html>
<html lang="ja">
	<head>
		<meta charset="utf-8">
		<title>画像ロードサンプル</title>
		<meta name="description" content="">
		<meta name="keywords" content="">
		<link rel="stylesheet" href="./example.css">
		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
		<script src="./example.js"></script>
	</head>

	<body>
		<h1>画像編集</h1>
		<div class="edit-image-area">
			<img src="" id="editImage" data-src="./example.png" alt="edit image">
		</div>
	</body>
</html>

[JavaScriptのコードサンプル]

$(document).ready(function() {
    //画像のロードイベント登録
    $('img#editImage').on('load', function(e) {
        alert($(this).attr('src') + ' が読み込まれました。');
        //画像が読み込まれたらマウスイベント登録
        $('#editImage').on('click', function(e) {
            alert('画像がクリックされました');
            //色々な処理
        });
    });

    //画像を読み込む ** 上記のonloadイベントを登録した後に画像ソースをセットすることが大事 **
    $('img#editImage').attr('src',$('img#editImage').data('src'));
});