ホームページ > ウェブフロントエンド > jsチュートリアル > jqueryの$(document).ready()とonload_javascriptスキルのロード順序

jqueryの$(document).ready()とonload_javascriptスキルのロード順序

WBOY
リリース: 2016-05-16 18:26:19
オリジナル
1100 人が閲覧しました

最近、フレームに埋め込まれたページを変更したときに、効果として jquery を使用しましたが、ページ自体も onload イベントにバインドされました。修正後、テストは Firefox では正常にスムーズに実行されますが、IE では jquery 効果が表示されるまでに 10 秒以上かかり、ニッコウキスゲは寒いです。

最初は、onload メソッドと競合しているのではないかと思いました。インターネットでは、$(document).ready() はページの DOM 解析が完了した後に実行され、onload イベントはすべてのリソースが準備された後に実行される、つまり $(document).ready() が実行されるとよく​​言われます。ページの DOM 解析が完了した後、onload 前に実行されます。特にページのピクチャが大きくなるほど、時間差が大きくなる可能性があります。しかし、私のページでは、画像は10秒以上表示されていますが、jquery効果はまだ表示されていません。

onload ローディング メソッドを削除してみますが、結果は同じです。元の onload イベント バインディングを記述するために $(document).ready() を使用する必要はないようです。では、Firefox は動作するのに IE は動作する理由は何でしょうか?その後デバッグを行ったところ、IE では元々バインドされていた onload メソッドが $(document).ready() のコンテンツの前に実行されるのに対し、Firefox では $(document).ready() のコンテンツが最初に実行されてから、元の onload メソッドが実行されることがわかりました。方法。 。これはネット上で言われていることと完全に一致しているわけではないようですが、興味深いですね。

jquery のソース コードを調べて、$(document).ready() がどのように実装されているかを確認します。

コードをコピー コードは次のとおりです:

if ( jQuery.browser.msie && window == top ) (function(){
if (jQuery.isReady) return;
try {
document.documentElement.doScroll("left");
} catch(error ) {
setTimeout( argument.callee, 0 );
return; / 待機中の関数を実行します
jQuery.ready();
})();
jQuery.event.add( window, "load", jQuery.ready ); 🎜>結果 IE は、Firefox と同様に、ページがフレームに埋め込まれていない場合にのみ、最初に $(document).ready() のコンテンツを実行し、次に元の onload メソッドを実行することは明らかです。フレームに埋め込まれたページの場合は、load イベントにバインドされて実行されるだけなので、当然、元の onload バインド メソッドが実行された後の順番になります。そして、このページにはテスト環境ではアクセスできないリソースがたまたまあり、10 秒以上の遅延はまさにそれが増幅する時間差です。

著者: ジョイス・リュー
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート