頁面加載的幾種方式和區別

目錄

• 頁面加載的幾種方式
• DOM文檔加載步驟
• 原生JS的 ready階段 執行方法怎麼寫？
• 全部方式的演示代碼
• window和document的區別

頁面加載的幾種方式（原生JS和jQuery）

• 1. window.onload = function(){}; —— 原生JS

• 2. $(window).load(function(){}); —— jQuery

• 3.$(document).ready(function(){}); —— jQuery

• 4.$(function(){}); —— jQuery

第1種：window.onload = function(){}; 第2種：$(window).load(function(){});

• 都是在頁面全部加載完成（引用文件，圖片等等資源都加載完畢時）執行的；
• 其中第1種：window.onload = function(){}; 只能執行一個；當有多個時，只執行最後一個；
• 而第2種：$(window).load(function(){}); 可以執行多個；

第3種：$(document).ready(function(){}); 第4種：$(function(){});

• 第4種是第3種的簡寫形式
• 都是在DOM元素加載完畢後便可執行的 （頁面全部內容如圖片等資源加載完畢前）

DOM文檔加載步驟

1. 解析html結構
2. 加載外部腳本和樣式表文件
3. 解析並執行腳本代碼
4. 構造HTML DOM模型 // ready 第3,4種
5. 加載圖片等外文件
6. 頁面加載完畢 // onload 第1,2種

原生JS的 ready階段 執行方法怎麼寫？

有沒有發現，上面四種方式裏並沒有原生JS的ready階段執行的方式：
下面給出原生JS中：如何在DOM加載完之後執行某段代碼
效果同$(document).ready(function(){});

document.addEventListener('DOMContentLoaded',function(){
	// DOM 渲染完即可執行，此時圖片，視頻還可能沒有加載完
	console.log('原生JS： DOMContentLoaded');
},false)

第1種：window.onload = function(){}; 同理也可寫爲：

window.addEventListener('load', function () {
	// 頁面的全部資源加載完纔會執行，包括圖片，視頻等
	console.log('原生JS： load 1');
})

addEventListener()方法即使給同一個元素綁定了兩次或多次相同類型的事件，綁定也依次觸發
有關事件綁定：JS事件綁定 事件冒泡與捕獲 事件代理

全部方式的演示代碼

最直白的方式就是看代碼啦┗( ▔, ▔ )┛

window.onload = function(){
	console.log('原生JS：window.onload 1');
}
window.onload = function() {
    console.log('原生JS：window.onload 2')
}

$(window).load(function(){
    console.log('Jquery：$(window).load() 1')
})
$(window).load(function(){
    console.log('Jquery：$(window).load() 2')
})

$(document).ready(function(){
    console.log('Jquery：$(document).ready(...) 1')
})
$(document).ready(function(){
    console.log('Jquery：$(document).ready(...) 2')
})

$(function(){
    console.log('Jquery：$(function(){}) 1')
})
$(function(){
    console.log('Jquery：$(function(){}) 2')
})


document.addEventListener('DOMContentLoaded',function(){
    // DOM 渲染完即可執行，此時圖片，視頻還可能沒有加載完
    console.log('原生JS：監聽 DOMContentLoaded');
},false)

window.addEventListener('load', function () {
    // 頁面的全部資源加載完纔會執行，包括圖片，視頻等
    console.log('原生JS：監聽 load 1');
})

window.addEventListener('load', function () {
    // 頁面的全部資源加載完纔會執行，包括圖片，視頻等
    console.log('原生JS：監聽 load 2');
})

輸出如下：

// Jquery：$(document).ready(...) 1
// Jquery：$(document).ready(...) 2
// Jquery：$(function(){}) 1
// Jquery：$(function(){}) 2
// 原生JS：監聽 DOMContentLoaded
// 原生JS：window.onload 2
// Jquery：$(window).load() 1
// Jquery：$(window).load() 2
// 原生JS：監聽 load 1
// 原生JS：監聽 load 2

在上面的幾種方式中，分別含有window和document
那麼，你知道它們的區別麼？

window和document的區別

• window
  window對象表示瀏覽器中打開的窗口
  window對象可以省略，例如：alert() 等價於 window.alert()

• document
  document對象是window對象的一部分
  例如：document.body 等價於 window.document.body
  瀏覽器的html文檔稱爲document對象（即整個頁面的dom元素）

兩者的區別在頁面具有滾動條的時候可以直觀的顯示出來。
當出現垂直滾動條時：$(window).height < $(document).height;
因爲window的高度始終是瀏覽器可視窗口的高度,而document的高度是整個頁面dom元素的高度（超出屏幕了）