【Jquery】errorメソッドが実行されない【Javascript】

Question

Twitter APIで自身のプロフィールを取得しているのですが、プロフィール画像を変更した時に自動で最新の画像を読み取り、変更するような設定したいと思います。

プロフィール画像を変更した時、前の画像のURLを読みに行くと404エラーになるのは確認済みだったので、Jqueryのerrorメソッドで、画像がエラー出したらAjaxで最新の画像を読みに行き、保存するようなプログラムを考えていました。

ところが、何故かエラーメソッドが実行されません。

試しに適当な他のドメインでも試してみたのですが、.errorが上手く実行されたのは、ドメインがそもそも間違っている場合のみでした。
（https://example/xxxxxxxx.jpgなど、サーバーに接続できない系）

以下はサンプルコードです。

<img class="image_test" data-name="image1" src="https://pbs.twimg.com/profile_images/123456789/xxxxxxxxx.jpg">
<img class="image_test" data-name="image2" src="https://example/xxxxxxxx.jpg">

<script>
jQuery(function(){
	jQuery('.image_test').error(function(){
		console.log(jQuery(this).data('name'));
	});
});
</script>

この場合、consoleに表示されるのは「image2」のみです。

「image1」のほうでエラーイベントを実行させるにはどうしたら良いのでしょうか…。

ブラウザは「Chrome 63.0.3239.132」(最新版)で、https化されたサイトで実行しています。

どなたかご教示お願いいたします。

Answer 1

まず、それ以前の問題として、.errorはjQuery 1.8で非推奨、jQuery 3.0で廃止となります（公式）。

そして、状況によっては「JavaScriptをセットする前に読み込みエラーとなっていた」となるので、onerrorイベントをセットしても手遅れとなります。このような場合は、「画像のDOM.complete == trueかつ画像のDOM.naturalWidth == 0」のような条件でチェックすれば、画像が読み込めているかを判定できます。

Comments

[sanset]

前回に引き続き、maisumakunさん回答ありがとうございます。

非推奨なのは見逃しておりました。
jQuery(document).on('error', '.image_test', function() {});
に置き換えさせていただきました。

申し訳ありません、分からない点の質問なのですが、

「画像のDOM.completed == trueかつ画像のDOM.naturalWidth == 0」

DOM.naturalWidthは把握できたのですが、DOM.completedというメソッドは初見で、ググッても分かりませんでした。
エラーは出ていないので現存するメソッドだと思うのですが、「jQuery('.image_test').completed == true」の場合は、画像が読み込めていないということになるのでしょうか？

また、

「そして、状況によっては「JavaScriptをセットする前に読み込みエラーとなっていた」となるので、onerrorイベントをセットしても手遅れとなります。」

というのは、jQuery(document).ready(function(){　などで画像の読み込みを済ませた後に、「画像のDOM.completed == trueかつ画像のDOM.naturalWidth == 0」などでチェックした方が良い、という解釈で合ってますか？

お手数おかけしますが、よろしくお願いいたします。

[maisumakun]

すみません、completedではなくcompleteです（本文の方も後で修正します）。これは「ロード中」にfalse、「ロード終了」（成功・失敗を問わず）していればtrueという値を取ります。

●complete==true→すでに読み込みが終わっているので、naturalWidthを見て画像が読み込めているか確認する（onerrorをセットしても、もはや動かない）
●complete==false→読み込み中なので、onerrorで処理をセットする（読み込む前なのでnaturalWidthは拾えない）

というような切り分けが適当かと思います。

[sanset]

回答ありがとうございます！
エラー処理は最新の記述で、加えてcompleteも記述して万全を期したいと思います。