ホームページ > ウェブフロントエンド > jsチュートリアル > ページの読み込みと js 関数の実行を onload または read_jquery で分析する

ページの読み込みと js 関数の実行を onload または read_jquery で分析する

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
リリース: 2016-05-16 17:09:28
オリジナル
1084 人が閲覧しました

まず、ページの読み込みシーケンス:
HTML 構造を解析します。
外部スクリプトとスタイルシート ファイルを読み込みます。
スクリプト コードを解析して実行します。
HTML DOM モデルを構築します。
画像などの外部ファイルを読み込みます。
ページがロードされました。

つまり:
html → head → title → #text (ウェブページのタイトル) → style → スタイルの読み込み → スタイルの解析 → リンク → 外部スタイルシートファイルの読み込み → 外部スタイルシートの解析 → スクリプト → 外部スクリプトファイルの読み込み→外部スクリプトファイルを解析→外部スクリプトを実行→本体→div→スクリプト→スクリプトをロード→スクリプトを解析→スクリプトを実行→img→スクリプト→スクリプトをロード→スクリプトを解析→スクリプトを実行→外部画像ファイルをロード→ ページの初期化が完了します。

JS の初期読み込み。

onload
は、ドキュメントが読み込まれるときは呼び出されませんが、ページのすべての要素 (画像などを含む) が読み込まれるときに呼び出されます。ダウンロードに時間がかかる大きなサイズの画像がある場合、画像が読み込まれるまでスクリプトが初期化されない場合があり、ユーザー エクスペリエンスに大きな影響を及ぼします。ただし、多くの場合、window.onload は役に立ちません。一部の B/S ソフトウェアでは、ユーザー関連の機能を提供する前にページが完全にロードされる必要があるため、window.onload が「ロード」機能を提供できるか、ページのコンテンツが非常に小さいため、document.ready() は必要ありません。さまざまな状況で、onload と ready を適切に使用する必要があります。

onload を使用してロードします:

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

window .onload=function (){
var currentRenderer = 'javascript'; swfUrl: "Pie3D.swf",
swfUrl: " 290", height: "210",
id: 'sampleChart',
dataFormat: FusionChartsDataFormats


W3C には DOMContentLoaded というイベントがあり、DOM (Document Object Model) が読み込まれるときにトリガーされます。

方法 1:



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

Jquery の $(function(){...}) $(document).ready(function(){...})(function () {
var ie = !! と似ています。 (window.attachEvent && !window.opera);
var wk = /webkit/(d )/i.test(navigator.userAgent) && (RegExp.$1 var fn = [] ;var run = function () { for (var i = 0; i var d = document;d.ready = function ( f) {if (!ie && !wk && d.addEventListener)return d.addEventListener('DOMContentLoaded', f, false);if (fn.push(f) > ; 1) return;if (ie)

(function () {
try { d.documentElement.doScroll('left'); run(); }
catch (err) { setTimeout (arguments.callee, 0); }
})();
else if (wk)
var t = setInterval(function () {
if (/^(loaded|complete)$ /.test (d.readyState))
clearInterval(t), run();
}, 0);
};
})();


呼び出し時:
document.ready(function(){
alert('ok');
}


方法 2:




コードをコピーします


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

/W3C DOM2 がサポートされている場合は、W3C メソッドを使用します。
if (document.addEventListener){
document.addEventListener("DOMContentLoaded",
}
); else if (/MSIE/i.test(navigator.userAgent))/IE ブラウザの場合 (サポートされていません)
/defer 属性を持ち、ドキュメントのロード時にロードされる script タグを作成します。
document.write("
var script = document.getElementByIdx_x("__ie_onload");
/ドキュメントが実際にロードされている場合は、初期化メソッドを呼び出します
script.onreadystatechange = function() {
if (this.readyState == 'complete') {
te();
} }
}
}
else if (/WebKit/i.test(navigator.userAgent) )) { /Safari ブラウザの場合 (サポートされていません)
/タイマーを作成し、0.01 秒ごとにチェックし、ドキュメントが読み込まれたら初期化メソッドを呼び出します
var _timer = setInterval( function() {
if (/loaded|complete/.test(document.readyState)) {
上記のいずれでもない場合は、最悪のオプションを使用します (この場合、Opera 7 がここで実行されます)
window.onload = function( e) {
te();
}
}
関数 te(){
アラート('ok');
}


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