ขั้นแรก ลำดับการโหลดหน้า:
แยกวิเคราะห์โครงสร้าง HTML
โหลดสคริปต์ภายนอกและไฟล์สไตล์ชีท
แยกวิเคราะห์และรันโค้ดสคริปต์
สร้างโมเดล HTML DOM
โหลดไฟล์ภายนอก เช่น รูปภาพ
โหลดเพจแล้ว
นั่นคือ:
html → head → title → #text (ชื่อหน้าเว็บ) → style → สไตล์การโหลด → สไตล์การแยกวิเคราะห์ → ลิงค์ → โหลดไฟล์สไตล์ชีตภายนอก → แยกวิเคราะห์สไตล์ชีตภายนอก → สคริปต์ → โหลดไฟล์สคริปต์ภายนอก → แยกวิเคราะห์ไฟล์สคริปต์ภายนอก → รันสคริปต์ภายนอก → body → div → script → โหลดสคริปต์ → parse script → รันสคริปต์ → img → script → โหลดสคริปต์ → parse script → รันสคริปต์ → โหลดไฟล์ภาพภายนอก → การเริ่มต้นเพจเสร็จสมบูรณ์
การโหลดครั้งแรกของ JS
กำลังโหลด
จะไม่ถูกเรียกเมื่อมีการโหลดเอกสาร แต่เมื่อมีการโหลดองค์ประกอบทั้งหมดของหน้า (รวมถึงรูปภาพ ฯลฯ) หากมีรูปภาพขนาดใหญ่บนหน้าและใช้เวลานานในการดาวน์โหลด สคริปต์ก็จะทำงาน ไม่สามารถโหลดได้ จนกว่าการโหลดรูปภาพจะเสร็จสิ้น ประสบการณ์ผู้ใช้จะได้รับผลกระทบอย่างมากในกรณีที่รุนแรง อย่างไรก็ตาม window.onload ไม่ได้ไร้ประโยชน์ ในหลายกรณี ซอฟต์แวร์ B/S บางตัวต้องการให้เพจเป็น โหลดเต็มที่ก่อนที่จะให้ฟังก์ชันที่เกี่ยวข้องกับผู้ใช้ ดังนั้น window .onload อาจมีฟังก์ชัน "กำลังโหลด" หรือเนื้อหาของหน้ามีขนาดเล็กมากและไม่จำเป็นต้องใช้ document.ready() เลย ทั้งนี้ขึ้นอยู่กับสถานการณ์ ควรใช้ onload และ ready อย่างสมเหตุสมผล
ใช้ onload เพื่อโหลด:
คัดลอกรหัสรหัสดังต่อไปนี้:
window.onload=ฟังก์ชั่น(){
var currentRenderer = 'จาวาสคริปต์';
FusionCharts.setCurrentRenderer(currentRenderer);
var chartObj = FusionCharts ใหม่ ({
swfUrl: "Pie3D.swf",
ความกว้าง: "290" ความสูง: "210"
รหัส: 'sampleChart',
แหล่งข้อมูล: "/ucenter/seo/new_seo_tool.php?check=xml&val={{pre_num}}",
dataFormat: FusionChartsDataFormats.XMLURL,
แสดงผลที่: 'chart1div'
}).แสดงผล();
-
พร้อม
มีเหตุการณ์ที่เรียกว่า DOMContentLoaded ใน W3C ซึ่งจะถูกทริกเกอร์เมื่อมีการโหลด DOM (Document Object Model)
วิธีที่หนึ่ง:
คัดลอกรหัสรหัสดังต่อไปนี้:
คล้ายกับ $(function(){...}) $(document).ready(function(){...}) ของ Jquery
(การทำงาน () {
var ie = !!(window.attachEvent && !window.opera);
var wk = /webkit//(/d+)/i.test(navigator.userAgent) && (RegExp.$1 < 525);
วาร์ fn = [];
var run = function () { สำหรับ (var i = 0; i < fn.length; i++) fn[i]();
var d = เอกสาร;
d พร้อม = ฟังก์ชั่น (f) {
ถ้า (!ie && !wk && d.addEventListener)
กลับ d.addEventListener ('DOMContentLoaded', f, false);
ถ้า (fn.push(f) > 1) กลับ;
ถ้า (เช่น)
(การทำงาน () {
ลอง { d.documentElement.doScroll('left'); run();
catch (ผิดพลาด) { setTimeout(arguments.callee, 0);
-
อย่างอื่นถ้า (สัปดาห์)
var t = setInterval (ฟังก์ชัน () {
ถ้า (/^(โหลดแล้ว|เสร็จสมบูรณ์)$/.test(d.readyState))
clearInterval(t), วิ่ง();
}, 0);
-
-
เมื่อโทร:
เอกสารพร้อม (ฟังก์ชั่น () {
alert('ตกลง');
-
วิธีที่สอง:
คัดลอกรหัสรหัสดังต่อไปนี้:
/หากรองรับ W3C DOM2 ให้ใช้วิธี W3C
ถ้า (document.addEventListener){
document.addEventListener("DOMContentLoaded", te, false);
-
อย่างอื่นถ้า (/MSIE/i.test(navigator.userAgent)){/ ถ้าเป็นเบราว์เซอร์ IE (ไม่รองรับ)
/สร้างแท็กสคริปต์ซึ่งมีแอตทริบิวต์ defer และจะถูกโหลดเมื่อโหลดเอกสาร
เอกสาร.write("
สคริปต์ var = document.getElementByIdx_x("__ie_onload");
/หากโหลดเอกสารแล้ว ให้เรียกใช้วิธีการเริ่มต้น
script.onreadystatechange = ฟังก์ชั่น () {
ถ้า (this.readyState == 'สมบูรณ์') {
เต้();
-
-
-
อย่างอื่นถ้า (/WebKit/i.test(navigator.userAgent)) {/ หากเป็นเบราว์เซอร์ Safari (ไม่รองรับ)
/สร้างตัวจับเวลา ตรวจสอบทุกๆ 0.01 วินาที และเรียกใช้วิธีการเริ่มต้นหากเอกสารถูกโหลด
var _timer = setInterval( ฟังก์ชั่น() {
ถ้า (/loaded|สมบูรณ์/.test(document.readyState)) {
clearInterval(_timer);
เต้();
-
}, 10);
-
มิฉะนั้น {/หากไม่มีวิธีใดข้างต้น ให้ใช้วิธีที่แย่ที่สุด (ในกรณีนี้ Opera 7 จะทำงานที่นี่)
window.onload = ฟังก์ชั่น (e) {
เต้();
-
-
ฟังก์ชั่น(){
alert('ตกลง');
-