JavaScript原生系列-页面加载完成之后执行（window onload 和 $().ready(function) 以及 body onload="">）

最新推荐文章于 2026-05-08 06:39:00 发布
原创 最新推荐文章于 2026-05-08 06:39:00 发布 · 8.3k 阅读 · 1
标签
#body onload #ready #页面加载完成执行 #window onload

转载请注明预见才能遇见的博客：http://my.csdn.net/

原文地址：https://blog.csdn.net/pcaxb/article/details/100661841

JavaScript原生系列-页面加载完成之后执行（window.onload 和 $().ready(function) 以及 <body οnlοad="">）

目录

1.原生window.onload 和 body οnlοad="">，原生没有ready函数

2.window和document的区别

3.原生和JQonload比较（JQ基本过时，了解一下就行）

1.原生window.onload 和 body οnlοad="">，原生没有ready函数

1.window.onload = function(){}方法是在网页中的所有的元素(包括元素的所有关联文件：图片、音视频、flash等)都完全加载到浏览器之后才执行。整个window页面加载完成后才执行，同级谁在前面谁先执行。多次绑定函数会覆盖前面的window.onload绑定的函数。

2.在标签上静态绑定onload事件，body οnlοad="meathName1();meathName2();">等待body加载完成，就会执行meathName1()方法。在window和dom之后执行，总是最后执行。这里的onload函数会覆盖window.onload，但是meathName2不会覆盖meathName1。

2.window和document的区别

1.window代表的是浏览器窗口，即可视的浏览器窗口。document代表的是整个页面的dom元素，即document只是window的一个属性；

2.两者的区别在页面有滚动条时可以直观的显示出来，当出现滚动条时，$(window).height和$(document).height是不相等的，$(document).height比$(window).height大，因为window的高度始终都是可见的浏览器窗口的高度，而document的高度则是整个页面的dom元素的高度，即超出一屏幕了。

最低0.47元/天 解锁文章
浅析$(function) ready和onload 的区别
01-21
新手接触javascript、jquery的时候不可避免的要接触题目所标识的相关内容，反复看过几次一到用的时候总是不踏实，写此文以记之。 　　符号“$”是jquery对象(个人这样理解，拥有函数的用法)。接着知道下面的一个等式，功能性能上是完全一致的。 $(function(){ /*do some thing*/ }) = $(document).ready(function(){/* do some thing */}) = $().ready(function(){ /* do some thing */ }); 　　上面是jquery中的东西，接着说下原生javascript中的，有
别再死记公式了！用STM32的ADC测个电压，带你搞懂采样率、分辨率到底啥意思
最新发布
weixin_33691700的博客
05-08 405
本文通过STM32 ADC与电位器的实验，深入浅出地解析了采样率与分辨率的核心概念。从硬件搭建到代码实现，详细展示了如何通过实际测量理解12位ADC的0-4095值域和采样率对信号捕捉的影响，并提供了提升ADC精度的实用技巧。
页面加载完成之后执行js函数window.onload 和 $().ready(function) 以及 <body onload="">的同级函数详解
pcaxb的专栏
10-13 7141
转载请注明预见才能遇见的博客：http://my.csdn.net/ 原文地址： 页面加载完成之后执行js函数window.onload 和 $().ready(function) 以及 的同级函数详解 1.window.onload = function(){} / $(window).load(function)方法是在网页中的所有的元素(包括元素的所有关联文件：图片、音视频、f
比较body.onload(function())、$(document).ready(function())与$(windows).load(function)
10-01 168
原理对比： body.onload(function())是优先将document的DOM渲染，即将页面所有的元素（包括html标签以及所引用到的图片，flash媒体等媒体文件）加载完成，然后再执行页面的脚本； $(windows).load(function())的加载效果与body.onload(function())是一样的效果； $(document).ready(func...
JavaScript：文档加载事件和浏览器的重排、重绘
读心悦
10-25 1478
很多时候需要在页面初始化阶段执行一些特定的操作，页面初始化的操作就是文档加载完成后的执行的操作。在DOM中，文档加载完成有两个事件，一个load事件，另一个是jQuery提供的ready事件。ready事件的触发表示文档结构已经加载完成，不包含图片、flash这些非文字媒体内容。onload事件的触发表示页面图片、flash这些所有元素已经加载完成。
原生javascript 共享onload事件
dengla6847的博客
06-28 250
在工作时，我们给一个元素绑定了事件，如果dom还没加载完成，就执行了js代码，就不会绑定成功。常规解决方案就是用： window.onload = EventFunction; 可是如果有两个事件， window.onload = EventFunction1; window.onload = EventFunction2; 那2就会将1取代，这时你可能会想：每个事件处理板书...
$(document).ready、body.Onload()和 $(window).load的区别
热门推荐
john2522的专栏
08-20 3万+
JavaScript文档加载完成事件 window.load(function(){...})和body.onload()都存在同样一个问题，那都是在页面所有元素(包括html标签以及引用到得所有图片,Flash等媒体)加载完毕后执行的,这是它们的共同点.$(document).ready()是文档结构已经加载完成（不包含图片等非文字媒体文件），不必等到所有的加载完毕。 原理是： $(do
html 页面加载完成后执行,js中页面加载完成后执行的几种方法及执行顺序
weixin_30994671的博客
06-04 5455
在js和jquery使用中，经常使用到页面加载完成后执行某一方法。通过整理，大概是五种方式(其中有的只是书写方式不一样)。1：使用jQuery的$(function){};2：使用jquery的$(document).ready(function(){});前两者本质上没有区别，第1种是第2种的简写方式。两个是document加载完成后就执行方法。3：使用jQuery的$(window).load...
页面加载完成后执行JS的5种方式
海康张师傅的博客
05-29 3361
在js和jquery使用中，经常使用到页面加载完成后执行某一方法。通过整理，大概是五种方式。 1.jQuery的$( function(){} ); 2.jQuery的$(document).ready( function(){} );前两者本质上没有区别，第1种是第2种的简写方式。两个是document加载完成后就执行方法。 3.jQuery的$(window).load( functio...
Jquery中的$(document).ready()详解
寒泉
10-01 2万+
参考：https://blog.csdn.net/beidaol/article/details/81009740 因为html代码顺序执行，所以想要在js操作某个标签元素的时候，要保证这个元素已经被加载出来了，否则会取不到。为了保证元素已经被加载，可以使用$(document).ready()。 window.onload = function(){ alert("welcome"); } ...
JavaScript的window.onload事件的理解
zhansan的博客
05-21 3万+
window.onload()的作用 window.onload() 方法用于在网页加载完毕后立刻执行的操作，即当 HTML 文档加载完毕后，立刻执行某个方法。 window.onload() 通常用于 元素，在页面完全载入后(包括图片、css文件等等)执行脚本代码。 只有一个要执行的函数语法： window.onload = funcRef; 在页面加载完成后 funcRef 方法会被调用。 有多个要执行的函数语法： window.οnlοad=function(){ Func1(); Fun
JavaScript-jQuery的ready和原生js的onload
杨的博客
11-25 454
package jdbc; import java.sql.Connection; import java.sql.DriverManager; import java.sql.SQLException; import java.sql.Statement; /** 练习-增 删 改 设计一个方法 public static void execute(String sql) 方法接受的参数是S...
原生JavaScript实现 验证码
kiku
08-02 673
原生JavaScript实现 验证码 一，HTML代码 <body onload='createCode()'> <div id="div1"> 请输入验证码：<input type = "text" id = "input"/> 验证码：<input type="button" id="code" onclick="createCode(...
关于window.onload不起效---原生JS
m0_57489910的博客
11-15 5257
今天自己在写vivo购物车(cart.js)逻辑代码的时候，遇到了window.onload不起效的问题。经过反复查看，我非常肯定我代码是没问题的。在网上查找，也没有对应的解决方法。 直接进入主题... 原因： 因为window.onload是绑定事件，既然是绑定事件，那说明同一文件目录下的每个页面（.html）只能拥有一个window.onload事件。假设：在page文件夹下，有首页(index.html)和购物车(cart.html)两个页面，在index.html中...
原生js的onload和onunload
u010234868的专栏
07-28 986
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> // var box = document.getElementById('box'); // console.dir(box); // null 代码由上向下执行，此时box元素还未被创建 // BOM onlo.
html5页面加载执行动作,页面加载完成后执行JS的5种方式
weixin_33421065的博客
06-05 2890
在js和jquery使用中，常用到页面加载完成后执行某一方法。经过整理，大概是五种方式。javascript1.jQuery的$( function(){} );html2.jQuery的$(document).ready( function(){} );前二者本质上没有区别，第1种是第2种的简写方式。两个是document加载完成后就执行方法。java3.jQuery的$(window).loa...
js在html中各初始化函数执行顺序
weixin_39585051的博客
08-29 2138
参见代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="./jquery-2.1.3.min.js"></script> <script type="text/javascript"> console.log(11111) wi
对window的onload与window的ready的认识
zmt0104的博客
11-28 1947
1. 页面的加载顺序   一般情况下，一个页面的相应加载顺序是：域名解析——>加载html——>加载js和css——>加载图片等其他信息。 2. 关于document.ready()与document.onload() document.ready()： /* 写法 */ //jq的写法 $(document).ready(function(){ //do somet...
onload执行顺序
weixin_33881140的博客
12-18 1634
今天研究了一下window对象的onload事件执行的顺序， 首先，在页面body里加入 &lt;body&gt;&lt;script&gt;alert('body inlined load');&lt;/script&gt;&lt;/body&gt; 然后在head节点里加入 &lt;script type="text/javascript" src="./j.js"&g
关于window.onload加载的多种解决方案
MYOS的博客
07-26 5998
使用JavaScript操纵DOM，必须等待DOM加载完毕才可以执行代码，但window.onload有个坏处，它非要等到页面中的所有图片及视频加载完毕才会触发load事件。结果就是一些本来应该在打开时隐藏起来的元素，由于网络延迟，在页面打开时仍然会出现，然后又会突然消失，让用户觉得莫名其妙。我们想做的就是寻找一种方法来确定DOM被完全的加载时不用等待所有那些讨厌的图片加载完毕。必须与这种
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值