如何判斷HTML頁面載入完成

2021-10-08 18:24:20 字數 1420 閱讀 6827

dom構建完成,不包含、樣式和其它框架,也就是我們常說的domcontentloaded事件。

頁面依賴的所有資源記載完成,也就是我們常說的window.onload事件。

監聽documentonreadystatechange,判斷readystate

document.onreadystatechange = function () 

};

或者

document.addeventlistener('readystatechange' , function () 

});

ps: on開頭的事件既可以通過domobj.oneventname的形式也可以通過domobj.addeventlistener(『eventname' ,function(){})的形式監聽。兩者的區別是:oneventname重複新增同一事件,只會觸發最後新增的事件。addeventlistener新增的事件都會出發,先新增的先觸發。

監聽documentready事件

document.ready = function();
監聽documentdomcontentloaded事件

document.addeventlistener('domcontentloaded', function () );
ps:jquery的$(function(){})$(document).ready(function(){})底層都是使用的domcontentloaded事件。

執行順序為:jquery ready >(早於) document.ready > domcontentloaded > readystatechange

監聽windowonload事件

window.onload = function () ;
監聽document.bodyonload事件

document.body.onload = function () ;
請注意:onload 方式新增會產生覆蓋效果(你可以把這兩個事件認為是同乙個事件),後新增的覆蓋先新增的事件。addeventlistener方式不會產生覆蓋。

下面是完整測試**:

點我呀

如何判斷頁面是否載入完成?

方式一 window.onload window.onload function 方式二 document ready document ready function 注意 頁面載入完成有兩種事件,一是ready,表示文件結構已經載入完成 不包含等非文字 檔案 二是onload,指示頁 面包含等檔案...

Javascript判斷頁面是否載入完成

很多時候我們在使用document.getelementbyid的時候直接在script標籤中獲取物件,然後使用,此時程式會出現該物件為undefined。script var dom document getelementbyid target alert dom undefined script...

JS判斷頁面是否載入完成

用 document.readystate complete 判斷頁面是否載入完成 傳回xml 檔案資料的目前狀況。基本語法 intstate xmldocument.readystate 說 明 這個屬性是唯讀的,傳回值有以下的可能 0 uninitialized xml 物件被產生,但沒有任何檔...