我有一個用戶單擊的按鈕，它會提交表單并在提交時重新加載頁面。我想檢查頁面的重新加載是否完成。我嘗試使用下面的方法，但它會在提交表單后甚至在加載完成之前立即發出警報。if(window.performance.navigation.type == 0){
alert('loaded');
}如何檢查加載是否完成。提前致謝！
3 回答
月關寶盒
TA貢獻1772條經驗 獲得超5個贊
DOMContentLoaded 和 Load對于此目的很有用
DOMContentLoaded – 瀏覽器完全加載 HTML，并且構建 DOM 樹，但可能尚未加載圖片和樣式表等外部資源。
load – 不僅加載 HTML，還加載所有外部資源：圖像、樣式等。
Load 應該僅用于檢測完全加載的頁面。在 DOMContentLoaded 更合適的情況下使用 load 是一個常見的錯誤。
? ?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}`);
? ?};
根據您的問題，您想在提交表單后進行檢查。因此，當表單提交時，窗口會重新加載，整個文檔也會重新加載。
您還可以使用document.readyState來檢查文檔是否已完全加載。
document.readyState屬性可用于檢查文檔是否準備就緒。來自 MDN：
值 文檔的readyState可以是以下之一：
正在加載 – 文檔仍在加載。交互式 – 文檔已完成加載并且文檔已被解析，但圖像、樣式表和框架等子資源仍在加載。完成 – 文檔和所有子資源已完成加載。該狀態表明加載事件即將觸發。
您可以使用下面的代碼。
? 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貢獻1804條經驗 獲得超3個贊
您可以利用onreadystatechange事件并檢查document readyState. 如果readyState有值complete則顯示警報。
當文檔的 ReadyState 屬性發生更改時，會觸發 ReadyStateChange 事件
或者只是在正文末尾加載 javascript 代碼。
例子：
document.onreadystatechange = () => {
if (document.readyState === 'complete') {
alert('loaded');
}
};
素胚勾勒不出你
TA貢獻1827條經驗 獲得超9個贊
您可以使用 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 關注
- 192 瀏覽
添加回答
舉報
0/150
提交
取消