Safariと画像オブジェクトのonloadイベント

【格安パソコンなら！ソーテックオンラインショップ！】

SafariのJavaScript不具合ではまってしまったことがあります。画像オブジェクトでonloadイベントやonerrorイベントが正しく動作しないのです。

<script type="text/javascript"> <!-- img=new Image(0,0); img.onerror=function (){ alert("画像の読み込み失敗"); }; img.onload=function (){ alert("画像の読み込み成功"); }; img.src="abcd.gif"; // --> </script>

のようなシンプルなプログラムがあったとして、このabcd.gifが存在しなければ、onerrorイベントが発生して、「画像読み込み失敗」とアラートが表示されるはずですが（もちろん、実際の運営では、アラートを出したところで何の意味もなく、実際には、画像の読み込みに失敗した場合には代替画像を表示させたりするのが目的です。）、Safariでは、「画像の読み込み成功」と表示されます。Safariでは、この時、onerrorイベントは発生せず、必ずonloadイベントが発生します。

--- 2007年6月16日20時50分ごろ追記start ---
この不具合は、2007年6月にリリースされたSafari 3.0 Betaで修正されました。Windows版、Mac版ともに確認しました。
--- 2007年6月16日20時50分ごろ追記end ---

ですから、この方法で画像の読み込みを判定するようにすると、Safariでは思わぬ結果になります。対策としては、２つあります。

一つは、IMGタグの中に直接JavaScriptを埋め込むことです。

<img src="nothing.jpg" onload="alert('画像の読み込み成功');" onerror="alert('画像の読み込み失敗');">

とすれば動きます。

また、document.createElementを使った場合も、正しく動作します。

<script type="text/javascript"> <!-- function a(){ alert("画像読み込み失敗"); } function b(){ alert("画像読み込み成功"); } if(document.createElement){ img_b=document.createElement("IMG"); if(window.attachEvent){ img_b.attachEvent("onerror",a); img_b.attachEvent("onload",b,false); } else if(window.addEventListener){ //SafariやFirefoxなど img_b.addEventListener("error",a,false); img_b.addEventListener("load",b,false); } else { //Mac版IE img_b.onerror=a; img_b.onload=b; } img_b.setAttribute('src','nothing.jpg'); }else { //Netscape 4.xなど大昔のブラウザ alert("ご利用のブラウザでは、document.createElementをサポートしていないので、この手法は利用できません。"); } // --> </script>

このSafariの不具合の原因は何なのでしょうか？ こちらのような画像読み込みテスト・ページを作成してみました。

抜粋しますと、

<script type="text/javascript"> <!-- img=new Image(0,0); try{document.myForm.message.value +="画像オブジェクトの作成。そのオブジェクトは" + img + "\n";}catch(e){document.myForm.message.value +="画像オブジェクトを参照しようとしてエラーになりました。そのエラーメッセージは、「" + e.message + "」\n"}; img.onerror=function (){ document.myForm.message.value +="画像オブジェクトの読み込み失敗\n"; }; img.onload=function (){ document.myForm.message.value +="画像オブジェクトの読み込み成功\n"; }; img.src="nothing.jpg"; // --> </script>

のようになります。alertだといちいち煩いので、document.myForm.message.value=～;として、テキストエリア内に表示するようにしてあります。

このtry ～ catch のところでSafariはエラーがcatchされています。そのエラーメッセージは、「No defauly value」となっています。画像オブジェクトを参照しようとしただけでです。IE6なら[object]、FirefoxやOperaなら[object HTMLImageElement]となるところなのですが・・・。

さらに、alert(img);とすると、ちゃんとSafariでも「object Image」となりますから、余計に意味が分かりません。

このサンプルテストでは、ちなみに、
IE6

画像オブジェクトの作成。そのオブジェクトは[object] 画像オブジェクトの読み込み失敗 document.createElement版で読み込み失敗 IMGタグによる直接読み込み失敗

Firefox、Opera

画像オブジェクトの作成。そのオブジェクトは[object HTMLImageElement] 画像オブジェクトの読み込み失敗 IMGタグによる直接読み込み失敗 document.createElement版で読み込み失敗

Safari

画像オブジェクトを参照しようとしてエラーになりました。そのエラーメッセージは、「No default value」 画像オブジェクトの読み込み成功 IMGタグによる直接読み込み失敗 document.createElement版で読み込み失敗

となります。Safariで「画像オブジェクトの読み込み成功」となってしまう理由を検証したのが、本稿です。