Javascript：Javascript経由で画像をロードする

Question

これはチュートリアルのJavaScriptコードで、画像をキャンバスに読み込んで後で操作します。無関係なコードの大部分を省略し、理解しやすくしました。

1）画像のファイル名を含む行が常にimageObj.onload関数の下に置かれている理由を理解できません。それは問題ですか？どの時点で画像が読み込まれ始めますか？

2）画像ファイルの送信元を忘れた場合はどうなりますか？

<script> 
      window.onload = function(){ 
       .... 

       var imageObj = new Image(); 

       imageObj.onload = function(){ 
        .... 
        .... 
        }); 

        .... 
        .... 

       }; 
       imageObj.src = "yoda.jpg"; 

      }; 
     </script> 

Answer 1

これは多少歴史的な問題です。 .onloadと.srcの順番は問題ではありません（どちらの注文でも技術的にはうまくいくでしょう）。問題がある場合は、可能であれば一部のブラウザ（一部のInternet Explorer）が画像を取得します.属性設定されています。

srcを設定する前に、常にonloadハンドラを宣言する必要があります。

src属性の設定を忘れてしまった場合は、何も起こりません。そのオブジェクトへの参照やクロージャーをそれ以上保持しないと、できるだけ早くガベージコレクションが行われます。

Answer 2

読み込みは、.srcプロパティを設定することによってトリガーされます。

古い（一部の）古いブラウザでは、プロパティが設定された後に登録されていると、特に画像が既にキャッシュに入っていて、すぐに「読み込まれた」場合は呼び出されません。

属性の設定を忘れると、何も起こりません。

Answer 3

src属性を設定すると、読み込みが開始されます。 img.onload関数は、イメージのロードに成功した後に呼び出されます。 srcを変更

Answer 4

は、「ロード・シーケンス」をトリガーし、およびによるJSの性質のために、あなたがイメージをロードしますが前にハンドラを登録する必要があり、逐次実行します。

srcはローディングシーケンスをトリガーしません。

Answer 5

window.onload = function(){ 
       // This is function 1 
       // This portion will execute when window has loaded completely. 
       // In simple words, page has been downloaded completely. 

       var imageObj = new Image(); 

       imageObj.onload = function(){ 
        // This is function 2 
        // This portion will execute when image has loaded completely 
        }); 

        .... 
        .... 

       }; 
       imageObj.src = "yoda.jpg"; 

ので、機能1と機能2は、このラインimageObj.src = "yoda.jpg";

これはあなたの最初の質問に答えた後に実行されます。それを下に置くことは、関数2の後に実行されます。javascriptでは、コードは上から順に実行されますが、関数内のコードはその関数が呼び出されたときにのみ実行されます。

アトリビュートをsrcに指定しないと、ダウンロードする画像がなくなるため、機能2は呼び出されません。