web-dev-qa-db-ja.com

jsの読み込みを延期する場合の$（document）.load（）と$（document）.ready（）の順序

すべてのコードを変更する前に、変更する必要があることを確認したいだけです。

Ready（）関数にあるインラインjs関数とjquery関数がいくつかあります。

$(document).ready(function(){ do_something(); ...

これらの関数の多くは、外部のjsドキュメントに含まれている他の関数に依存しています。また、外部スタイルシートで定義されているクラスも使用します。

これで、外部jsとcssの読み込みが延期されるように変更されました（Googleの推奨事項 https://developers.google.com/speed/docs/best-practices/payload?hl=en #DeferLoadingJS ）：

 if (window.addEventListener)
    window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
    window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;

このようにして、JSの読み込みを開始する前に、すべての画像を含むページが完全にレンダリングされます。

これは正常に機能します。しかし、なぜ、そしてそれが常にそうなるのかどうか疑問に思っています。 $（document）.ready（）はonLoadの前に実行されませんか？ $（document）.readyの実行時に必要な関数が定義されていないリスクはありませんか？

したがって、すべての$（document）.readyを$（document）.load（）に変更する必要がありますか？または、それらの少なくともいくつか？しかし、どのonLoad（）が最初に実行されますか？外部js（ヘッダーで定義されている）またはインラインjsをロードするものですか？ロードの準備を変更すると何が失われますか？たとえば、ユーザーが要素をクリックしたときにイベントが要素に添付されないリスクがありますか？

ところで、他のコードを実行しようとしたときに問題が発生したため、jqueryapiは延期されません。

jqueryrenderingloading
8
user984003

使ってみてください

 $(window).load(function(){
 dosomething();
 });

ページ全体が読み込まれた後、jsを実行します。

使用を避ける

$(document).ready(function(){
 dosomething();
 });

DOMのロード直後にjsを実行します。

8
Chunky

実行順序は次のとおりです。

  1. ready()は、DOM（HTML）の準備ができて、スクリプトがロードされたときに発生します。
  2. load()は、HTML、スクリプト、CSS、画像など、他のすべての読み込みも終了したときに発生します

原則として、すべてのスクリプトをreadyハンドラーとloadハンドラーの外部に配置して、関数が呼び出されるまでに関数が読み込まれるようにします。次に、すべてのイベントリスナーをreadyハンドラー内に保持し、必要に応じて関数を呼び出します。

高レベルのJS構造は次のようになります。

  1. jQueryライブラリ
  2. プラグイン/サードパーティスクリプト
  3. カスタムスクリプト
  4. $(document).ready()DOMイベントをリッスンする最小限のJSロジックをラップする
3
Oriol