検索

jQuery でのready関数の仕組み

Jun 25, 2017 am 10:31 AM
jquery関数仕事機構

jQuery は優れたスクリプト ライブラリであり、最初のバージョンは 2006 年 1 月の BarCamp NYC で John Resig によってリリースされました。最新バージョンは http://jquery.com/ からダウンロードできます。現在のバージョンは 1.8.3 です。

jQuery を学習するにはさまざまな方法があります。今日は jQuery の Ready 関数から始めます。この例のコードは、jQuery スクリプト ライブラリからのものです。

jQuery を使用したことがある場合は、ready 関数を使用したことがあるはずです。この関数は、ページの準備ができたときに実行できる関数を登録するために使用されます。

問題は、ページがいつ完成するかということです。

1. onload イベント

このイベントを処理する最も基本的な方法は、ページの開始タグに直接記述する方法です。 HTML を介した body 要素は、DOM0 メソッドと DOM2 メソッドに分けられるイベント登録でも使用できます。ブラウザの互換性を考慮して、以下のようにDOM2モードで記述します。


if (document.addEventListener) {    // A fallback to window.onload, that will always work
    window.addEventListener("load", jQuery.ready, false);    // If IE event model is used} else {    // A fallback to window.onload, that will always work
    window.attachEvent("onload", jQuery.ready);
}

2. DOMContentLoaded イベント

ただし、onload イベントは、ページ上の画像などを含むすべてのページ要素が読み込まれるまでトリガーされません。 Web ページに多数の写真がある場合、ユーザーが写真を見る前にページの操作を開始した可能性が考えられます。この時点では、ページは初期化されておらず、イベントも登録されていません。遅すぎませんか?

DOM の onload イベントに似たよく知られた onload イベントに加えて、標準ベースのブラウザーではこのイベントがサポートされており、このイベントはすべての DOM が解析されるときにトリガーされます。

このようにして、標準ベースのブラウザーの場合、このイベントの処理を登録することもできます。このようにして、読み込み完了イベントをより早くキャッ​​チできるようになります。


if (document.addEventListener) {    // Use the handy event callback
    document.addEventListener("DOMContentLoaded", DOMContentLoaded, false);    // A fallback to window.onload, that will always work
    window.addEventListener("load", jQuery.ready, false);

}

3. onreadystatechange イベント

ブラウザが標準ではない場合はどうすればよいですか?

ブラウザに document.onreadystatechange イベントがある場合、イベントがトリガーされたとき、document.readyState=complete であれば、DOM ツリーがロードされているとみなすことができます。

ただし、このイベントはあまり信頼性がありません。たとえば、ページに画像がある場合、onload イベントの後にトリガーされる可能性があります。つまり、ページにバイナリ リソースが含まれていない場合、またはバイナリ リソースが含まれていない場合にのみ正しく実行される可能性があります。少ないかキャッシュされています。


if (document.addEventListener) {    // Use the handy event callback
    document.addEventListener("DOMContentLoaded", DOMContentLoaded, false);    // A fallback to window.onload, that will always work
    window.addEventListener("load", jQuery.ready, false);    // If IE event model is used} else {    // Ensure firing before onload, maybe late but safe also for iframes
    document.attachEvent("onreadystatechange", DOMContentLoaded);    // A fallback to window.onload, that will always work
    window.attachEvent("onload", jQuery.ready);
}

DOMContentLoaded 関数は何をしているのですか?最後に、jQuery.ready 関数を呼び出す必要があります。


DOMContentLoaded = function() {    if ( document.addEventListener ) {
        document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false );
        jQuery.ready();
    } else if ( document.readyState === "complete" ) {        // we're here because readyState === "complete" in oldIE
        // which is good enough for us to call the dom ready!
        document.detachEvent( "onreadystatechange", DOMContentLoaded );
        jQuery.ready();
    }
}

4. doScroll 検出メソッド

MSDN には、ページ DOM がロードされていない場合、doScroll メソッドが呼び出されたときに例外が生成されるという目立たない記述があります。次に、それを逆に使用します。例外がなければ、ページ DOM はロードされています。

Diego Perini は 2007 年に、doScroll メソッド呼び出しを使用して、IE がロードされているかどうかを検出する方法を報告しました。詳細な手順については、こちらをご覧ください。

原則として、IE が非 iframe にあるときは、doScroll を実行できるかどうかによって DOM が読み込まれているかどうかを継続的に判断することしかできません。この例では、doScroll を 50 ミリ秒ごとに実行しようとします。ページがロードされていないときに doScroll を呼び出すと例外が発生するため、例外をキャッチするために try -catch が使用されます。


(function doScrollCheck() {    if (!jQuery.isReady) {        try {            // Use the trick by Diego Perini
            // http://javascript.nwbox.com/IEContentLoaded/
            top.doScroll("left");
        } catch (e) {            return setTimeout(doScrollCheck, 50);
        }        // and execute any waiting functions        jQuery.ready();
    }
})();

5. document.readyState ステータス

ready 関数の登録が遅すぎる場合、ページがロードされた後に独自の ready 関数を登録すると、上記の層のチェックは必要なくなります。現在のページのreadyStateを見て、それが完了している場合は、登録するready関数を直接実行できます。ただし、ChrisS は非常に特殊なエラー状況を報告したため、実行を遅らせる必要があります。

setTimeout 经常被用来做网页上的定时器,允许为它指定一个毫秒数作为间隔执行的时间。当被启动的程序需要在非常短的时间内运行,我们就会给她指定一个很小的时间数,或者需要马上执行的话,我们甚至把这个毫秒数设置为0,但事实上,setTimeout有一个最小执行时间,当指定的时间小于该时间时,浏览器会用最小允许的时间作为setTimeout的时间间隔,也就是说即使我们把setTimeout的毫秒数设置为0,被调用的程序也没有马上启动。

这个最小的时间间隔是多少呢?这和浏览器及操作系统有关。在John Resig的新书《Javascript忍者的秘密》一书中提到

    Browsers all have a 10ms minimum delay on OSX and a(approximately) 15ms delay on Windows.(在苹果机上的最小时间间隔是10毫秒,在Windows系统上的最小时间间隔大约是15毫秒)

,另外,MDC中关于setTimeout的介绍中也提到,Firefox中定义的最小时间间隔(DOM_MIN_TIMEOUT_VALUE)是10毫秒,HTML5定义的最小时间间隔是4毫秒。既然规范都是这样写的,那看来使用setTimeout是没办法再把这个最小时间间隔缩短了。

这样,通过设置为 1, 我们可以让程序在浏览器支持的最小时间间隔之后执行了。


// Catch cases where $(document).ready() is called after the browser event has already occurred.// we once tried to use readyState "interactive" here, but it caused issues like the one// discovered by ChrisS here: http://bugs.jquery.com/ticket/12282#comment:15if (document.readyState === "complete") {    // 延迟 1 毫秒之后,执行 ready 函数
    setTimeout(jQuery.ready, 1);
}

 6. 完整的代码

在 jQuery 中完整的代码如下所示。位于 jQuery 1.8.3 源代码的 #842 行。


jQuery.ready.promise = function( obj ) {    if ( !readyList ) {

        readyList = jQuery.Deferred();        // Catch cases where $(document).ready() is called after the browser event has already occurred.
        // we once tried to use readyState "interactive" here, but it caused issues like the one
        // discovered by ChrisS here: http://bugs.jquery.com/ticket/12282#comment:15
        if ( document.readyState === "complete" ) {            // Handle it asynchronously to allow scripts the opportunity to delay ready
            setTimeout( jQuery.ready, 1 );        // Standards-based browsers support DOMContentLoaded
        } else if ( document.addEventListener ) {            // Use the handy event callback
            document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );            // A fallback to window.onload, that will always work
            window.addEventListener( "load", jQuery.ready, false );        // If IE event model is used
        } else {            // Ensure firing before onload, maybe late but safe also for iframes
            document.attachEvent( "onreadystatechange", DOMContentLoaded );            // A fallback to window.onload, that will always work
            window.attachEvent( "onload", jQuery.ready );            // If IE and not a frame
            // continually check to see if the document is ready
            var top = false;            try {
                top = window.frameElement == null && document.documentElement;
            } catch(e) {}            if ( top && top.doScroll ) {
                (function doScrollCheck() {                    if ( !jQuery.isReady ) {                        try {                            // Use the trick by Diego Perini
                            // http://javascript.nwbox.com/IEContentLoaded/
                            top.doScroll("left");
                        } catch(e) {                            return setTimeout( doScrollCheck, 50 );
                        }                        // and execute any waiting functions                        jQuery.ready();
                    }
                })();
            }
        }
    }    return readyList.promise( obj );
};

那么,又是谁来调用呢?当然是需要的时候,在我们调用 ready 函数的时候,才需要注册这些判断页面是否完全加载的处理,这段代码在 1.8.3 中位于代码的 #244 行,如下所示:


ready: function( fn ) {    // Add the callback    jQuery.ready.promise().done( fn );    return this;
}

在页面上引用 jQuery 脚本库之后,执行了 jQuery 的初始化函数,初始化函数中创建了 ready 函数。我们在通过 ready 函数注册事件处理之前,jQuery 完成了页面检测代码的注册。这样。当页面完全加载之后,我们注册的函数就被调用了。

以上がjQuery でのready関数の仕組みの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
JavaScriptの役割:WebをインタラクティブでダイナミックにするJavaScriptの役割:WebをインタラクティブでダイナミックにするApr 24, 2025 am 12:12 AM

JavaScriptは、Webページのインタラクティブ性とダイナミズムを向上させるため、現代のWebサイトの中心にあります。 1)ページを更新せずにコンテンツを変更できます。2)Domapiを介してWebページを操作する、3)アニメーションやドラッグアンドドロップなどの複雑なインタラクティブ効果、4)ユーザーエクスペリエンスを改善するためのパフォーマンスとベストプラクティスを最適化します。

CおよびJavaScript:接続が説明しましたCおよびJavaScript:接続が説明しましたApr 23, 2025 am 12:07 AM

CおよびJavaScriptは、WebAssemblyを介して相互運用性を実現します。 1)CコードはWebAssemblyモジュールにコンパイルされ、JavaScript環境に導入され、コンピューティングパワーが強化されます。 2)ゲーム開発では、Cは物理エンジンとグラフィックスレンダリングを処理し、JavaScriptはゲームロジックとユーザーインターフェイスを担当します。

Webサイトからアプリまで:JavaScriptの多様なアプリケーションWebサイトからアプリまで:JavaScriptの多様なアプリケーションApr 22, 2025 am 12:02 AM

JavaScriptは、Webサイト、モバイルアプリケーション、デスクトップアプリケーション、サーバー側のプログラミングで広く使用されています。 1)Webサイト開発では、JavaScriptはHTMLおよびCSSと一緒にDOMを運用して、JQueryやReactなどのフレームワークをサポートします。 2)ReactNativeおよびIonicを通じて、JavaScriptはクロスプラットフォームモバイルアプリケーションを開発するために使用されます。 3)電子フレームワークにより、JavaScriptはデスクトップアプリケーションを構築できます。 4)node.jsを使用すると、JavaScriptがサーバー側で実行され、高い並行リクエストをサポートします。

Python vs. JavaScript:ユースケースとアプリケーションと比較されますPython vs. JavaScript:ユースケースとアプリケーションと比較されますApr 21, 2025 am 12:01 AM

Pythonはデータサイエンスと自動化により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、データ処理とモデリングのためにNumpyやPandasなどのライブラリを使用して、データサイエンスと機械学習でうまく機能します。 2。Pythonは、自動化とスクリプトにおいて簡潔で効率的です。 3. JavaScriptはフロントエンド開発に不可欠であり、動的なWebページと単一ページアプリケーションの構築に使用されます。 4. JavaScriptは、node.jsを通じてバックエンド開発において役割を果たし、フルスタック開発をサポートします。

JavaScript通訳者とコンパイラにおけるC/Cの役割JavaScript通訳者とコンパイラにおけるC/Cの役割Apr 20, 2025 am 12:01 AM

CとCは、主に通訳者とJITコンパイラを実装するために使用されるJavaScriptエンジンで重要な役割を果たします。 1)cは、JavaScriptソースコードを解析し、抽象的な構文ツリーを生成するために使用されます。 2)Cは、Bytecodeの生成と実行を担当します。 3)Cは、JITコンパイラを実装し、実行時にホットスポットコードを最適化およびコンパイルし、JavaScriptの実行効率を大幅に改善します。

JavaScript in Action:実際の例とプロジェクトJavaScript in Action:実際の例とプロジェクトApr 19, 2025 am 12:13 AM

現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1)DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2)node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。

JavaScriptとWeb:コア機能とユースケースJavaScriptとWeb:コア機能とユースケースApr 18, 2025 am 12:19 AM

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1)DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2)ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3)サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

JavaScriptエンジンの理解:実装の詳細JavaScriptエンジンの理解:実装の詳細Apr 17, 2025 am 12:05 AM

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1)エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2)実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3)ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

mPDF

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境