JavaScript与jQuery页面加载事件详解：window.onload与$(document).ready对比

作者：像素猫时间：2026-10-27 22:17:00浏览：578

本文详细解析JavaScript和jQuery中页面自动加载的几种实现方式，重点对比window.onload与$(document).ready的执行时机差异。通过五种代码示例展示如何绑定多个函数及简化写法，帮助开发者根据实际需求选择合适的事件加载方案。

方法1：

原生JavaScript页面加载事件

代码示例如下：

Window.onload = function() {
Var name = document.getElementById("name").val(); // 该操作会加载HTML文档，并等待外部资源（如图片、CSS样式表、JS脚本等）全部加载完毕
}

方法2：需要引入Jquery的 .js文件

jQuery页面加载事件实现方式

代码示例如下：

$(document).ready(function() {
alert("JQuery的第一个入门案例"); // 仅加载HTML结构，无需等待外部资源，立即执行
});

方法3： ( 等同于方法2 )

代码示例如下：

jQuery(function() {
if ($("input[name='message']").val() != "")
alert($("input[name='message']").attr("value"));
});

方法4 ：(等同于上)

代码示例如下：

$(function() {
alert("JQuery 页面自动加载时执行 1 ....");
 });

方法5-1：window.onload事件的加载(页面加载时同时加载多个函数...)

HTML内联与JS绑定多函数加载方案

代码示例如下：

<html>
<body onload="function1(),function2(),function3()">
</body>
</html>
<script >
function1() {
 }
function2() {
}
function3() {
}
</script>

方法5-2：window.onload事件的加载(页面加载时同时加载多个函数...)

代码示例如下：

<html>
<body>
</body>
<html>
<script>
function1() {
   }
function2() {
   }
function3() {
   }
window.onload = function() {
function1();
function2();
function3();
   }
</script>

作者最新文章

vtk.js 渲染窗口黑屏或无内容显示的常见原因及排查

2026-11-05 17:30:30

js-cookie 安装与基础用法：set、get、remove 详解

2026-11-05 16:35:06

适合JavaScript初学者的实战项目：制作简易待办事项列表

2026-11-05 16:17:07

JS打开新标签页时怎么通过URL传递参数

2026-11-05 12:21:08

sigma.js 自定义节点样式：设置颜色、大小及标签显示的技巧

2026-11-05 09:55:00