如何在页面加载时运行函数？

在页面加载时运行函数可以通过以下几种方法实现：

使用window.onload事件：在页面加载完成后，触发window.onload事件，可以将需要运行的函数绑定到该事件上。当页面加载完成时，绑定的函数将被执行。例如：

window.onload = function() {
    // 在这里编写需要在页面加载时运行的函数
}

使用DOMContentLoaded事件：该事件在DOM树构建完成后触发，不需等待所有资源（如图片、样式表等）加载完成。可以将需要运行的函数绑定到该事件上。例如：

document.addEventListener("DOMContentLoaded", function() {
    // 在这里编写需要在页面加载时运行的函数
});

将script标签放置在页面的底部：将需要运行的函数包含在script标签中，并将该标签放置在页面的底部。这样，当解析器加载到该script标签时，函数将会被立即执行。例如：

<body>
    <!-- 页面内容 -->
    
    <script>
        // 在这里编写需要在页面加载时运行的函数
    </script>
</body>

使用自执行函数：将需要运行的函数定义为一个自执行函数，将该函数包含在script标签中，并将该标签放置在页面的任意位置。当解析器加载到该script标签时，自执行函数将被立即执行。例如：

<script>
    (function() {
        // 在这里编写需要在页面加载时运行的函数
    })();
</script>

需要注意的是，以上方法可以根据实际需求选择合适的方式来运行函数。

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云