javascriptでcreateElementした時の外部ファイルはどのタイミングで読み込まれるのか検証

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

WEBシステムでDOM構築をjavascriptでコントロールしている時に、ふと浮かんだ疑問があります。
 

それは、scriptタグをcreateElementしてappendChildする際に、ブラウザはどのタイミングでファイルを読み込み始めるのか?という内容です。
 

読み込み完了をonloadイベントで取得してコールバック関数で処理をすることで、確実にデータを処理する事ができるのですが、無駄にデータを読み込まないようにもしたいために、無駄判定が発生したらscriptタグを設置しないようにすればいいのですが・・・半分効率化、半分興味本位で、読み込みタイミングの実験を行いたいと思います。

普通に読み込んで順番を確認する

まずは、各種ソースコードの一覧を掲載
 

 

 

 


 

index.htmlをブラウザで読み込むと以下のような状態になります。
 


 

全てのデータが無事に読み込まれている事がわかります。

appendChildしないとどうなる?

上記のjavascriptファイル”load.js”を下記のように修正してみます。
 

&nbps;

この状態でブラウザ読み込みをしてみると・・・
 


 

“labo.svg”ファイルが何故か読み込まれているのが分かります。
 

この結果から考えると、image関数を使ったオブジェクトはsrcを与えた瞬間に読み込みが開始するという事が分かります。
 

createElementした状態でsrc属性を追加しても、読み込みは開始されないので、色々なコンテンツを扱う時の事前読み込みなどで利用できますね。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です