まず、ページの読み込み順序:
HTML 構造を解析します。
外部スクリプトとスタイルシート ファイルを読み込みます。
スクリプトコードを解析して実行します。
HTML DOM モデルを構築します。
画像などの外部ファイルを読み込みます。
ページが読み込まれます。
つまり:
html → head → title → #text (Webページのタイトル) → style → スタイルの読み込み → スタイルの解析 → リンク → 外部スタイルシートファイルの読み込み → 外部スタイルシートの解析 → スクリプト → 外部スクリプトファイルの読み込み → 外部スクリプトファイルの解析 → 外部スクリプトの実行 → body → div → script → スクリプト読み込み → スクリプト解析 → スクリプト実行 → img → スクリプト → スクリプト読み込み → スクリプト解析 → スクリプト実行 → 外部画像ファイル読み込み → ページ初期化完了。
JSの初期読み込み。
オンロード
このスクリプトは、ドキュメントが読み込まれるときではなく、ページのすべての要素 (画像などを含む) が読み込まれるときに呼び出されます。ページ上に大きなサイズの画像があり、ダウンロードに時間がかかる場合、スクリプトは呼び出されます。画像の読み込みが完了するまでは、初期化ができないため、深刻な場合にはユーザー エクスペリエンスに大きな影響を及ぼします。ただし、一部の B/S ソフトウェアでは、多くの場合、このページをロードする必要があります。ユーザー関連の機能を提供する前に完全にロードされるため、window .onload 「読み込み」機能を提供することもできますが、ページのコンテンツが非常に小さく、状況に応じて document.ready() がまったく必要ない場合は、onload と ready を合理的に使用する必要があります。
onload を使用してロードします。
次のようにコードをコピーします。
window.onload=function(){
var currentRenderer = 'javascript';
FusionCharts.setCurrentRenderer(currentRenderer);
var chartObj = 新しい FusionCharts({
swfUrl: "Pie3D.swf",
幅: "290"、高さ: "210"、
ID: 'サンプルチャート',
データソース: "/ucenter/seo/new_seo_tool.php?check=xml&val={{pre_num}}",
データ形式: FusionChartsDataFormats.XMLURL、
renderAt: 'chart1div'
})。与える();
}
準備ができて
W3C には DOMContentLoaded というイベントがあり、DOM (Document Object Model) が読み込まれるときにトリガーされます。
方法 1:
次のようにコードをコピーします。
Jquery の $(function(){...}) $(document).ready(function(){...}) に似ています
(関数 () {
var ie = !!(window.attachEvent && !window.opera);
var wk = /webkit//(/d+)/i.test(navigator.userAgent) && (RegExp.$1 < 525);
var fn = [];
var run = function () { for (var i = 0; i < fn.length; i++) fn[i]() };
var d = ドキュメント;
d. 準備完了 = 関数 (f) {
if (!ie && !wk && d.addEventListener)
return d.addEventListener('DOMContentLoaded', f, false);
if (fn.push(f) > 1) が戻る;
もし(つまり)
(関数 () {
{d.documentElement.doScroll('left'); を試してください。
catch (err) { setTimeout(arguments.callee, 0);
})();
そうでなければ (週)
var t = setInterval(function() {
if (/^(loaded|complete)$/.test(d.readyState))
クリアインターバル(t)、実行();
}, 0);
};
})();
電話をかけるとき:
document.ready(function(){
アラート('ok');
}
方法 2:
次のようにコードをコピーします。
/W3C DOM2 がサポートされている場合は、W3C メソッドを使用します
if (document.addEventListener){
document.addEventListener("DOMContentLoaded", te, false);
}
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') {
て();
}
}
}
else if (/WebKit/i.test(navigator.userAgent)) {/Safari ブラウザの場合(サポートされていません)
/タイマーを作成し、0.01 秒ごとにチェックし、ドキュメントが読み込まれたら初期化メソッドを呼び出します
var _timer = setInterval( function() {
if (/loaded|complete/.test(document.readyState)) {
クリアインターバル(_timer);
て();
}
}、10);
}
else {/上記のいずれでもない場合は、最悪の方法を使用します (この場合、Opera 7 がここで実行されます)
window.onload = 関数(e) {
て();
}
}
関数te(){
アラート('ok');
}