JS 等待页面加载 - Javascript

在网站开发中，我们经常会遇到需要在页面加载完毕后执行一些Javascript代码的需求。例如，我们需要获取某些DOM元素的尺寸或者位置，然而这些元素只有在页面完全加载后才能获取。

本文将探讨使用Javascript等待页面加载的方法。

等待DOM加载

当我们使用Javascript获取DOM元素时，有时候我们需要等待DOM元素完全加载后才能进行操作。我们可以使用DOMContentLoaded事件来实现该功能。

// 等待DOM元素加载完成后执行
document.addEventListener("DOMContentLoaded", function(event) { 
    console.log("页面DOM元素加载完成");
});

在这个例子中，我们使用addEventListener方法来监听DOMContentLoaded事件。当DOM元素加载完成后，我们将会在控制台上看到“页面DOM元素加载完成”的消息。

等待图片加载

在某些情况下，我们需要等待页面上的图片加载完成后执行一些操作。我们可以使用window对象的load事件来实现该操作。

// 等待图片加载完成后执行
window.addEventListener("load", function() {
    console.log("所有图片加载完成");
});

在这个例子中，我们使用addEventListener方法来监听load事件。当所有图片都加载完成后，我们将会在控制台上看到“所有图片加载完成”的消息。

使用 Promise 等待页面加载

在ES6中，我们可以使用Promise来实现等待页面加载的功能。首先，我们封装一个函数，该函数返回一个Promise对象。在该函数中，我们使用document.readyState来检查页面是否加载完成。如果没有加载完成，我们使用setTimeout方法等待1秒钟后再次检查页面加载状态。

function waitForPageLoad() {
    return new Promise(function(resolve, reject) {
        var checkPageLoaded = function() {
            if(document.readyState === "complete") {
                resolve();
            } else {
                setTimeout(checkPageLoaded, 1000);
            }
        };

        checkPageLoaded();
    });
}

现在，我们可以使用该函数来等待页面加载完成后执行一些操作。

// 等待页面加载完成后执行
waitForPageLoad().then(function() {
    console.log("页面加载完成");
});

在这个例子中，我们调用waitForPageLoad函数并等待Promise对象返回。当该对象返回后，我们将会在控制台上看到“页面加载完成”的消息。

结论

在本文中，我们探讨了使用Javascript等待页面加载的方法。我们学习了使用DOMContentLoaded事件和window对象的load事件来等待页面和图片的加载。最后，我们还学习了使用ES6中的Promise来等待页面加载。

无论你选择哪种方法，等待页面加载是Web开发中非常重要的一个步骤。