Html页面自动加载完成的方法

在网页加载完成后执行特定函数是前端开发中的常见需求。以下是几种实现方法及其适用场景：

1、使用 window.onload 事件

window.onload 事件会在页面及其所有资源（如图片、样式表等）加载完成后触发。

适用于需要确保所有资源加载完毕后再执行的场景。

示例代码：

<!DOCTYPE html>
<html>
    <head>
        <title>页面加载完成后执行函数</title>
        <script>
            window.onload = myFunction;
            function myFunction() {
                alert("页面加载完成后执行的函数");
            }
        </script>
    </head>
    <body>
        <h1>示例页面</h1>
    </body>
</html>

 

2、使用 DOMContentLoaded 事件

DOMContentLoaded 事件会在 DOM 树构建完成后触发，而无需等待图片或样式表等资源加载完成。

适用于需要尽早操作 DOM 的场景。

示例代码：

<!DOCTYPE html>
<html>
    <head>
        <title>页面加载完成后执行函数</title>
        <script>
            document.addEventListener("DOMContentLoaded",myFunction);
            function myFunction() {
              alert("页面加载完成后执行的函数");
            }
        </script>
    </head>
    <body>
        <h1>示例页面</h1>
    </body>
</html>

 

3、使用 jQuery 的 $(document).ready()

如果项目中使用了 jQuery，可以通过 $(document).ready() 方法实现页面加载完成后的操作。

它与 DOMContentLoaded 类似，而无需等待图片或样式表等资源加载完成，但语法更简洁。

示例代码：

<!DOCTYPE html>
<html>
  <head>
    <title>页面加载完成后执行函数</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
      $(document).ready(myFunction);
      function myFunction() {
        alert("页面加载完成后执行的函数");
      }
    </script>
  </head>
  <body>
    <h1>示例页面</h1>
  </body>
</html>

 

4、使用 jQuery 的立即执行函数$(function(){/*...*/})

如果项目中使用了 jQuery，可以通过 $(document).ready() 方法实现页面加载完成后的操作。

它与使用 jQuery 的 $(document).ready()，起到的效果完全一样。但语法更简洁。

在一个页面中不同的js中写的$(function(){/*...*/});函数，会根据js的排列顺序依次执行。

示例代码： 

<!DOCTYPE html>
<html>
  <head>
    <title>页面加载完成后执行函数</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
      $(function () {
        myFunction();
      });
      function myFunction() {
        alert("页面加载完成后执行的函数");
      }
    </script>
  </head>
  <body>
    <h1>示例页面</h1>
  </body>
</html>

 

posted @ 2026-06-07 12:10  冬至小孩  阅读(12)  评论(0)    收藏  举报