Chrome の JQuery実行タイミング

今回は、画像がなかった際のエラー画像表示処理について思ったことを書きたいと思います。

本当はサーバー側で画像の有無を判別したいところですが、他サーバーへのアクセスの場合

どうしてもHTTPリクエストになってしまい処理が重い。

そこで javascriptによる簡易的なエラー画像を表示しようと試みたのですが、

どうも表示がされたりされなかったり。

chromeさんだけで。

chromeさんは今までにも何度も同期関連でやらかしてくれており、正直使いたくはないのですが対応しないわけにはいかなく・・。

$(function()
{
	$("#datas").find('img').error(function()
	{
		$(this).attr('src', 'images/noimage.jpg');
	});
});

$(function()

{

$("#datas").find('img').error(function()

{

$(this).attr('src', 'images/noimage.jpg');

});

まあとりあえず、こんな感じに書きますよね。

これだとなんかダメなんですよね。

結局どう対応したかと言いますと、

<div id="datas">
	<img src="aaa.jpg" />
</div>
<script type="text/javascript">
	// 要素直下におかないと chromeで errorイベントが間に合わない
	$("#datas").find('img').error(function()
	{
		$(this).attr('src', 'images/noimage.jpg');
	});
</script>

</div>

// 要素直下におかないと chromeで errorイベントが間に合わない

$("#datas").find('img').error(function()

{

$(this).attr('src', 'images/noimage.jpg');

});

</script>

このように画像要素のすぐ下あたりにスクリプト埋め込むと上手いこと表示されました。

もし似たような現象が起きた方いましたら試しにやってみるとよいかもしれません。