我有一個(gè)用戶單擊的按鈕，它會(huì)提交表單并在提交時(shí)重新加載頁面。我想檢查頁面的重新加載是否完成。我嘗試使用下面的方法，但它會(huì)在提交表單后甚至在加載完成之前立即發(fā)出警報(bào)。if(window.performance.navigation.type == 0){
alert('loaded');
}如何檢查加載是否完成。提前致謝！
3 回答
月關(guān)寶盒
TA貢獻(xiàn)1772條經(jīng)驗(yàn) 獲得超5個(gè)贊
DOMContentLoaded 和 Load對(duì)于此目的很有用
DOMContentLoaded – 瀏覽器完全加載 HTML，并且構(gòu)建 DOM 樹，但可能尚未加載圖片和樣式表等外部資源。
load – 不僅加載 HTML，還加載所有外部資源：圖像、樣式等。
Load 應(yīng)該僅用于檢測(cè)完全加載的頁面。在 DOMContentLoaded 更合適的情況下使用 load 是一個(gè)常見的錯(cuò)誤。
? ?window.addEventListener('DOMContentLoaded', (event) => {
? ? ? ? console.log('DOM fully loaded and parsed');
? ? });
? ?//===================
? ?window.onload = function() {?
? ? // same as window.addEventListener('load', (event) => {
? ? alert('Page loaded');
? ? // image is loaded at this time
? ? alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);
? ?};
根據(jù)您的問題，您想在提交表單后進(jìn)行檢查。因此，當(dāng)表單提交時(shí)，窗口會(huì)重新加載，整個(gè)文檔也會(huì)重新加載。
您還可以使用document.readyState來檢查文檔是否已完全加載。
document.readyState屬性可用于檢查文檔是否準(zhǔn)備就緒。來自 MDN：
值 文檔的readyState可以是以下之一：
正在加載 – 文檔仍在加載。交互式 – 文檔已完成加載并且文檔已被解析，但圖像、樣式表和框架等子資源仍在加載。完成 – 文檔和所有子資源已完成加載。該狀態(tài)表明加載事件即將觸發(fā)。
您可以使用下面的代碼。
? if(document.readyState === "complete") {
? ? // Fully loaded!
? ? }
? ? else if(document.readyState === "interactive") {
? ? ? ? ?// DOM ready! Images, frames, and other subresources are still?
? ? ? ?downloading.
? ? }
? ? else {
? ? ? ?// Loading still in progress.
? ? ? ?// To wait for it to complete, add "DOMContentLoaded" or "load"?
? ? ? ? ?listeners.
? ? window.addEventListener("DOMContentLoaded", () => {
? ? ? ? // DOM ready! Images, frames, and other subresources are still?
? ? ? ? downloading.
? ? });
? ? window.addEventListener("load", () => {
? ? ? ? // Fully loaded!
? ? });
?}
狐的傳說
TA貢獻(xiàn)1804條經(jīng)驗(yàn) 獲得超3個(gè)贊
您可以利用onreadystatechange事件并檢查document readyState. 如果readyState有值complete則顯示警報(bào)。
當(dāng)文檔的 ReadyState 屬性發(fā)生更改時(shí)，會(huì)觸發(fā) ReadyStateChange 事件
或者只是在正文末尾加載 javascript 代碼。
例子：
document.onreadystatechange = () => {
if (document.readyState === 'complete') {
alert('loaded');
}
};
素胚勾勒不出你
TA貢獻(xiàn)1827條經(jīng)驗(yàn) 獲得超9個(gè)贊
您可以使用 window.onload：
window.onload = function() {
alert("loaded");
};
<button onclick="location.reload()">Reload</button>
https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event
- 3 回答
- 0 關(guān)注
- 205 瀏覽
添加回答
舉報(bào)
0/150
提交
取消