JavaScript Tips
ネットワーク編

サーバーの接続をチェックする



■ [2] 画像利用/読み込み完了イベント(onload)を組み合わせる


前回は画像の読み込み失敗時のイベントを利用して外部サーバーの 状態を検知しましたがそれだけでは、失敗時の処理しかできません。  そこで、今回は画像の読み込み成功時に発生するonloadイベントの 使い方を確認し、前回のonerrorとの組み合わせる方法についてみていきます。

  • 1: 指定した画像が読み込み完了したらダイアログを表示する
  • 2: 指定した画像読み込みの成否によって処理を分岐する
  • 3: 上記4をimgタグを用いずにスクリプトだけで処理する
  • 4: ボタンクリックでチェックする
  • 5: 第一候補、第二候補を順番にチェックする

     ( 画像のイベントハンドラonerrorとonloadはJavaScript1.1から実装されているので JavaScriptが動作する現在のブラウザなら完全に動作すると想定してもよい 安全なテクニックです。)


  • 1: 指定した画像が読み込み完了したらダイアログを表示する
    
      <img src = "http://game.guide.withabout.net/guide_game/gp333/about/tips/net/1/1.gif"
           width   = "0"
           height  = "0"
           onload  = "alert('読み込めました')">
    
    
    http://game.guide.withabout.net/guide_game/gp333/about/tips/net/1/1.gif(ここでは1ドットの小さな画像を使っています)は存在するので 読み込み完了時にonloadが起動しダイアログが表示されます。
    width,heightが0なのは、読み込み検知用なので見えなくするためです (必要ならサイズは大きくしても動作に変わりはありません)。


  • 2: 指定した画像読み込みの成否によって処理を分岐する
    
    <script type="text/javascript">
    <!--
    
    	//画像を読み込めなかったときの処理をここに書きます
    	function worksForErr(e)
    	{
    		  alert("読み込みできませんでした")
    	}
    
    	//画像を読み込めたときの処理をここに書きます
    	function worksForLoaded(e)
    	{
    		  alert("読み込めました")
    	}
    
    //-->
    </script>
    
    <img src = "http://test.game.gr.jp/about/tips/net/1/0.gif"
         width   = "0"
         height  = "0"
         onload  = "worksForLoaded(event)"
         onerror = "worksForErr(event)">
    
    
    このサンプルではhttp://test.game.gr.jp/about/tips/net/1/0.gifは存在しないので onerrorが起動し、関数worksForErr()の中のスクリプトが実行されます。 もし、読み込みが成功すれば関数worksForLoaded()の中のスクリプトが実行されます。

    onerrorは相手画像の読み込みを試して読み込み失敗と判断するまでに タイムラグがあります。結果を待たずに短いタイミングで処理を進めたいときは onloadの結果を無視してsetTimeoutなどで待ち時間を決めて別の処理を行って みてください(ただしアバウトな処置にはなりますが...)。


  • 3: 上記4をimgタグを用いずにスクリプトだけで処理する
    
      <script type="text/javascript">
      <!--
    
    	//画像のオブジェクトを作成し各イベントを定義する
    	var img = new Image(0,0)
    	    img.onerror = worksForErr
    	    img.onload  = worksForLoaded
    
    	    //画像を読み込む
    	    img.src = "http://game.guide.withabout.net/guide_game/gp333/about/tips/net/1/1.gif"
    
    
    	//画像を読み込めなかったときの処理をここに書きます
    	function worksForErr(e)
    	{
    		  alert("読み込みできませんでした")
    	}
    
    	//画像を読み込めたときの処理をここに書きます
    	function worksForLoaded(e)
    	{
    		  alert("読み込めました")
    	}
    
      //-->
      </script>
    
    
    このサンプルはimgタグを用いずにスクリプトだけで処理するものです。 サンプルでは、 http://test.game.gr.jp/about/tips/net/1/0.gifが存在するので onloadが起動し、関数worksForLoaded()の中のスクリプトが実行されます。 もし、読み込みが失敗すれば関数worksForErr()の中のスクリプトが実行されます。


  • 4: ボタンクリックでチェックする
    
    <script type="text/javascript">
    <!--
    
    
    	//画像のオブジェクトを作成し
    	//ロードチェック用各イベントを定義する
    	function chkImg(src){
    
    	  this.img = new Image(0,0)
    
    	  this.img.onerror = function worksForErr(event)
    	  {
    	      //画像を読み込めなかったときの処理をここに書きます
    	      alert("読み込みできませんでした")
    	  }
    
    	  this.img.onload  = function worksForLoaded(event)
    	  {
    	      //画像を読み込めたときの処理をここに書きます
    	      alert("読み込めました")
    	  }
    
    	  //画像を読み込む
    	  this.img.src = src
    
    	}
    
    		
    //-->
    </script>
    
    <input type    = "button" 
           value   = "0.gif(存在しない)をチェックする"
           onclick = "chkImg('http://test.game.gr.jp/about/tips/net/1/0.gif')">
    
    <input type    = "button" 
           value   = "1.gif(存在する)をチェックする"
           onclick = "chkImg('http://game.guide.withabout.net/guide_game/gp333/about/tips/net/1/1.gif')">
    
    
    
    このサンプルは5のサンプルの関数をまとめたものです。 ボタンクリックでそれぞれ指定した画像を読み込みチェックをしています。


  • 5: 第一候補、第二候補を順番にチェックする
    
    <script type="text/javascript">
    <!--
    
    //読み込む画像第一候補
    var imgsrc0= 'http://test.game.gr.jp/about/tips/net/1/0.gif'
    //読み込む画像第二候補
    var imgsrc1= 'http://game.guide.withabout.net/guide_game/gp333/about/tips/net/1/1.gif'
    
    //実行
    chkImg(imgsrc0)
    
    
    	//画像のオブジェクトを作成し
    	//ロードチェック用各イベントを定義する
    	function chkImg(src){
    
    	  this.img = new Image(0,0)
    
    	  this.img.onerror = function worksForErr(event)
    	    {
    	      //画像を読み込めなかったときの処理をここに書きます
    
    	      if(src==imgsrc0)
    	      {
    	        alert(src+"を読み込めなかったので?n"+imgsrc1+"を試します")
    	        chkImg(imgsrc1)
    	      }
    	      else if(src==imgsrc1)
    	      {
    	        alert("駄目でした")
    	      }
    
    	    }
    
    	  this.img.onload  = function worksForLoaded(event)
    	  {
    	      //画像を読み込めたときの処理をここに書きます
    	      alert(src+"を読み込めました")
    	  }
    
    	  //画像を読み込む
    	  this.img.src = src
    
    	}
    
    
    このサンプルも5のサンプルの関数をまとめたものです。 第一候補のファイルが駄目なら第二候補を読み込みチェックをしています。 alert()を削除すれば自動的に連続動作してくれます。



このように、画像のonerrorとonloadを使うと外部サーバーの状態によって 代替サーバーを切り替える分岐が可能なことがわかります。

次回は、この分岐後に行える処理について考えてみます。 代替画像を読み込むというだけではなくて、代替ページへリダイレクト したり、代替スクリプトを読み込んだりという方法などです。











※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。