2019年4月18日

リソース読み込み: onload と onerror

ブラウザは外部リソース – スクリプト, iframes, 画像など – の読み込みを追跡することができます。

そのためのイベントが２つあります:

onload – ロードが成功した,
onerror – エラーが発生した.

スクリプトの読み込み

外部スクリプトにある関数を呼び出す必要があるとしましょう。

次のようにして動的にロードすることができます。:

          let script = document.createElement('script');
script.src="/?originalUrl=https%3A%2F%2Fja.javascript.info%2F%26quot%3Bmy.js%26quot%3B%3Bdocument.head.append(script)%3B%253C%2Fcode">

…しかし、どうやってそのスクリプトの中で宣言された関数を実行するのでしょう？私たちはそのスクリプトの読み込みまで待つ必要があり、その後に初めて呼び出すことができます。


script.onload
主なヘルパーは load イベントです。スクリプトがロードされ、実行された後にトリガされます。

      
        
        
          
            
          
          
            
          
        
        
          let script = document.createElement('script');

// 任意のドメインから任意のスクリプトがロードできます
script.src="/?originalUrl=https%3A%2F%2Fja.javascript.info%2F%26quot%3Bhttps%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Flodash.js%2F4.3.0%2Flodash.js%26quot%3Bdocument.head.append(script)%3Bscript.onload%2520%3D%2520function()%2520%257B%2520%2520%2F%2F%2520%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%2597%25E3%2583%2588%25E3%2581%25AF%25E3%2583%2598%25E3%2583%25AB%25E3%2583%2591%25E3%2583%25BC%25E9%2596%25A2%25E6%2595%25B0%2520%26quot%3B_%26quot%3B%2520%25E3%2582%2592%25E4%25BD%259C%25E3%2582%258A%25E3%2581%25BE%25E3%2581%2599%2520%2520alert(_)%3B%2520%2F%2F%2520%25E9%2596%25A2%25E6%2595%25B0%25E3%2581%25AF%25E5%2588%25A9%25E7%2594%25A8%25E5%258F%25AF%25E8%2583%25BD%25E3%2581%25A7%25E3%2581%2599%257D%3B%253C%2Fcode">

        

      

      
      
そのため、onload では、スクリプト変数の利用や関数の実行などが可能です。

…そして、仮に読み込みが失敗したらどうなるでしょう？例えば、そのようなスクリプトがない(404 エラー)もしくはサーバがない、サーバがダウンしている場合です。
script.onerror
スクリプトの読み込み(実行ではない)中に発生したエラーは error イベントで追跡することが可能です。
例えば、存在しないスクリプトを要求してみましょう:

      
        
        
          
            
          
          
            
          
        
        
          let script = document.createElement('script');
script.src="/?originalUrl=https%3A%2F%2Fja.javascript.info%2F%26quot%3Bhttps%3A%2F%2Fexample.com%2F404.js%26quot%3B%3B%2520%2F%2F%2520%25E3%2581%2593%25E3%2582%2593%25E3%2581%25AA%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%2597%25E3%2583%2588%25E3%2581%25AF%25E3%2581%2582%25E3%2582%258A%25E3%2581%25BE%25E3%2581%259B%25E3%2582%2593document.head.append(script)%3Bscript.onerror%2520%3D%2520function()%2520%257B%2520%2520alert(%26quot%3BError%2520loading%2520%26quot%3B%2520%2B%2520this.src)%3B%2520%2F%2F%2520Error%2520loading%2520https%3A%2F%2Fexample.com%2F404.js%257D%3B%253C%2Fcode">

        

      

      
      
ここではエラーの詳細を取得することはできないことに注意してください。エラーが 404, 500, または他の何かだったのかは分かりません。単に読み込みに失敗したということだけです。

他のリソース
load と error イベントは他のリソースに対しても機能します。そこには微妙な違いがあります。
例えば:

<img>, <link> (外部のスタイルシート)
load と error 両方のイベントは期待通りに機能します。
<iframe>
iframe の読み込みが完了した時の load イベントのみです。ロードが成功した場合とエラーが発生した場合の両方をトリガーします。 これは歴史的な理由によるものです。

サマリ
画像 <img>, 外部スタイル, スクリプトや他のリソースは、それらの読み込みを追跡するために load と error イベントを提供しています。:

load はロードが成功したときにトリガされます。
error はロードに失敗したときにトリガされます。

唯一の例外は <iframe> です: 歴史的な理由により、どんな完了にもかかわらず(たとえページが見つからなくても)、常に load をトリガします。
readystatechange イベントもリソースに対して機能しますが、殆ど使われません。なぜなら load/error イベントの方がシンプルなためです。

`タスク`

`CallBack でイメージを読み込む`

重要性: 4

通常、イメージはそれらが作られたときにロードされます。そのため、<img> をページに追加するとき、ユーザにはすぐにはその写真は見えません。まず、ブラウザがそれをロードする必要があります。


すぐにイメージを見るために、次のようにして “事前に” それを作成することができます:

      
        
        
          let img = document.createElement('img');
img.src="/?originalUrl=https%3A%2F%2Fja.javascript.info%2Fmy.jpg";
        
      
      
      
ブラウザはイメージの読み込みを開始し、キャッシュにそれを覚えます。その後、ドキュメントに同じにイメージが現れるとき(どのような方法でも)、すぐに表示されます。
配列 sources からすべてのイメージをロード、準備ができたら callback を実行する関数 preloadImages(sources, callback) を作成します
例えば、イメージがロードされた後に alert が表示されます。:

      
        
        
          function loaded() {
  alert("Images loaded")
}

preloadImages(["1.jpg", "2.jpg", "3.jpg"], loaded);
        
      
      
      
エラーが発生した場合でも、関数はイメージが “読み込まれた” と想定します。
つまり、callback はすべてのイメージがロードされたかエラーになったかの場合に実行されます。
関数は便利です。例えば、多くのスクロール可能な画像があるギャラリーを表示し、すべての画像がロードされていることを確認したい場合などに使えます。
ソースドキュメントには、テストイメージへのリンクやそれらがロードされたかどうかを確認するコードがあります。それは 300 を出力するはずです。
タスクのためのサンドボックスを開く

アルゴリズム:

各ソースの img を作ります。
各イメージの onload/onerror を追加します。
onload または onerror がトリガされた時にカウンタを増やします。
カウンタがソースカウントと等しくなったとき – 完了です: callback()。

サンドボックスで解答を開く

前のレッスン次のレッスン

シェア

チュートリアルマップ

`コメント`

コメントをする前に読んでください…自由に記事への追加や質問を投稿をしたり、それらに回答してください。
数語のコードを挿入するには、<code> タグを使ってください。複数行の場合は <pre> を、10行を超える場合にはサンドボックスを使ってください(plnkr, JSBin, codepen…)。
記事の中で理解できないことがあれば、詳しく説明してください。

リソース読み込み: onload と onerror

スクリプトの読み込み

script.onload

script.onerror

他のリソース

サマリ

`タスク`

`CallBack でイメージを読み込む`

`コメント`

チャプター

レッスンナビゲーション