當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

DOM加载过程中ready和load的区别

發布時間：2023/12/20 编程问答 20 豆豆

生活随笔收集整理的這篇文章主要介紹了 DOM加载过程中ready和load的区别小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

在瀏覽器地址欄輸入URL地址，瀏覽器開始加載頁面時，有以下幾個過程

1、瀏覽器開始解析HTML文檔

2、瀏覽器遇到HTML文檔中的<script>元素以及CSS樣式文件，并且沒有async或defer屬性，就暫停解析，開始執行腳本和CSS樣式

3、 HTML文檔解析完成

4、瀏覽器等待圖片、樣式表、字體文件等外部資源加載完成

在這其中，有兩個階段：

ready，表示文檔結構已經加載完成（不包含圖片等非文字媒體文件）；

load，表示頁面包含圖片等外部文件在內的所有元素都加載完成。

DOM Ready

嚴格來說，ready并不是DOM中的事件，只是因為在jQuery中，有ready()方法，它在頁面HTML文檔解析完成但圖片等媒體文件加載完成之前執行。

使用jQuery插件一般都這么寫

$(function(){//do somethingalert('something finished！') });

其實這個就是jQuery ready()的簡寫，他等價于

$(document).ready(function(){//do somethingalert('something finished！') })

這個jQuery ready()的方法就是DOM Ready ，他的作用就是，在DOM加載完成后，圖片等外部文件加載之前，就可以對DOM進行操作。

在不使用jQuery的情況下，可以使用DOMContentLoaded事件可以判斷DOM的ready狀態。

document.addEventListener('DOMContentLoaded', function () {//do somethingalert('something finished！') });

它表示在document節點上監聽DOMContentLoaded事件，一旦document中的DOM完成加載就觸發此事件。

IE8不支持DOMContentLoaded事件，因此在較低版本的瀏覽器中，可以使用 readystatechange事件，效果是一樣的。

document.onreadystatechange = function () {if (document.readyState == "interactive") { //do somethingalert('something finished！')}}

其中，document.readyState屬性返回當前文檔的狀態，共有三種可能的值。

- loading：加載HTML代碼階段（尚未完成解析）

- interactive：加載外部資源階段時

- complete：加載完成時

Dom Load

DOM在完全加載完成之后會觸發load事件，此時如果想做點事情的話，可以這么寫

window.οnlοad=function(){//do somethingalert('something finished！') }

注意，不要寫成document.onload，因為在大多數瀏覽器中，在document上監聽load事件是無效的，應當在window上監聽。

使用jQuery的寫法

$(window).load(function(){//do somethingalert('something finished！') })

這就是Dom Load，他的作用就是，在DOM以及其中的圖片等其他外部文件全部加載完畢之后觸發。

考慮一下下面的代碼在執行時，會先彈出哪個窗口。

參考：

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload

https://www.w3.org/TR/html5/syntax.html#the-end

JavaScript標準參考教程http://javascript.ruanyifeng.com/dom/document.html

轉載于:https://www.cnblogs.com/zhmhhu/p/6250060.html

以上是生活随笔為你收集整理的DOM加载过程中ready和load的区别的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。