除了 load 和 DOMContentLoaded 还有哪些方法可以判断页面加载完成

2025-04-05 | 0 浏览 | 0 评论

除了load和DOMContentLoaded还有哪些方法可以判断页面加载完成

除了 window.addEventListener("load") 和 document.addEventListener('DOMContentLoaded') 之外，还有其他方法可以判断页面加载完成。以下是一些常见的方法：

使用 readystatechange 事件：
readystatechange 事件会在文档的读取状态改变时触发。可以通过检查 document.readyState 的值来判断页面是否加载完成。

document.addEventListener('readystatechange', function() {
    if (document.readyState === 'complete') {
        // 页面加载完成
        console.log('Page fully loaded');
    }
});

使用 jQuery 的 $(document).ready() ：
如果你在使用 jQuery，可以使用 $(document).ready() 方法来判断 DOM 是否已经加载完成。
```
$(document).ready(function() {
    // DOM 加载完成
    console.log('DOM fully loaded');
});
```

使用 MutationObserver：
使用 MutationObserver 可以检测 DOM 变化，并在页面加载完成时执行特定操作。

const observer = new MutationObserver((mutations, observer) => {
    if (document.readyState === 'complete') {
        // 页面加载完成
        console.log('Page fully loaded');
        observer.disconnect(); // 停止观察
    }
});

observer.observe(document, {
    childList: true,
    subtree: true
});

使用 Promise 和 requestAnimationFrame：
通过 requestAnimationFrame 循环检查 document.readyState，并使用 Promise 来处理异步操作。

function pageLoaded() {
    return new Promise(resolve => {
        if (document.readyState === 'complete') {
            resolve();
        } else {
            const checkReadyState = () => {
                if (document.readyState === 'complete') {
                    resolve();
                } else {
                    requestAnimationFrame(checkReadyState);
                }
            };
            requestAnimationFrame(checkReadyState);
        }
    });
}

pageLoaded().then(() => {
    // 页面加载完成
    console.log('Page fully loaded');
});

这些方法各有优点，具体使用哪种方法取决于你的具体需求和应用场景。

function ready(fn) {
  if (document.readyState !== 'loading') {
    fn();
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
}

‍

笔记