2023年1月26日木曜日

ページ・プロパティのページ・ロード時に実行について

 すこし気になったので、ページ・ロード時に呼ばれるJavaScriptの順番を確認してみました。


JavaScript：ファンクションおよびグローバル変数の宣言


生成されるページの先頭部分に<script type="text/javascript">として挿入されます。一番最初に実行されます。



JavaScript：ファイルURL


ファイルおよびグローバル変数の宣言の後に<script src="ファイル名">として、ファイルの読み込みが指定されます。


Document: DOMContentLoadedイベント




document.addEventListener('DOMContentLoaded', (event) => {
    console.log('DOM fully loaded and parsed');
});

一番最初にイベントとして発生します。そのため、JavaScriptのファイルURLで指定されるファイル内に記述するか、ファンクションおよびグローバル変数の宣言に含める必要があります。


動的アクションのページのロード



APEXで設定できる処理の中では、一番早く実行されています。後述するイベントtheme42ready、apexreadyendよりも早いので、ページの読み込みが完了する前に処理が実行されます。


JavaScript: ページ・ロード時に実行



生成されるページの末尾部分に<script type="text/javascript">として挿入されます。ページ読み込みの最後（ページ読み込みは未完）に実行されます。


イベント：theme42ready




apex.jQuery(window).on('theme42ready', function() {
        console.log('Do something after UI elements are rendered on the page.');
 });

ユニバーサル・テーマで定義されているイベントです。ユニバーサル・テーマの初期化が終了したときに発生します。


イベント：apexreadyend




apex.jQuery( apex.gPageContext$ ).on( "apexreadyend", function( e ) {
     // code here
} );

APEXとしてページ・ロードが完了したときに発生します。theme42readyより後になります。

標準のページ・ロード・イベントとは異なり、DOMの準備ができるまでは待ちません。遅延ロードの設定がされたコンポーネントであれば、そのコンポーネントの準備は待つ（データのロードは待たない）とのことです。


Window：loadイベント




window.onload = (event) => {
     console.log('page is fully loaded');
};

一番最後に実行されます。

ページ全体が、スタイルシートや画像などのすべての依存するリソースを含めて読み込まれたときに発生します。

完
投稿者 時刻:
ラベル: