window.onload和$(function(){})区别

最新推荐文章于 2024-07-02 15:03:05 发布
最新推荐文章于 2024-07-02 15:03:05 发布
阅读量1.1w 收藏 15
点赞数 3
CC 4.0 BY-SA版权
分类专栏： Javascript 文章标签： javascript jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/taoerchun/article/details/51490714

window.onload是js原生的事件，$(function(){})是Jquery的方法(等价于$(document).ready(function(){}) )，两者主要有以下几点差别：


1、window.onload：在页面所有资源加载完后执行，如果有多个定义则只执行最后一个

2、$(function(){})：在Dom节点创建完成后执行，如果有多个定义则依次执行

可以看出$(function(){})在window.onload前执行


比如：页面中只有一个img标签，当img节点创建完后就会执行$(function(){})中的代码，当img的src指定的图片完全加载完后才会触发window.onload事件。


window.onload和DOMContentLoaded的区别
skysys的研究小屋
08-13 3005
一、何时触发这两个事件？ 1、当 onload 事件触发时，页面上所有的DOM，样式表，脚本，图片，flash都已经加载完成了。 2、当 DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash。 二、为什么要区分？ 开发中我们经常需要给一些元素的事件绑定处理函数。但问题是，如果那个元素还没有加载到页面上，但是绑定事件已经执行完了，是没有效果的。这两个事件大致就是用来避免这样一种情况，将绑定的函数放在这两个事件的回调中，保证能在页面的某些元素加载完毕之后再绑定事件的函
jQuery中的.ready()和window.onload的区别及示例代码
ByteZenith的博客
09-27 441
在JavaScript和jQuery中，我们经常需要在文档加载完毕后执行一些代码。jQuery提供了.ready()函数，而原生JavaScript则提供了window.onload事件。在上面的代码中，当文档解析完成后，$.ready()函数的回调函数将会被执行，并显示一条消息在控制台上。而当整个页面加载完成后，window.onload事件触发，它的回调函数同样会在控制台上显示一条消息。根据你的需求，选择适合的方法来确保你的代码在正确的时机执行。
关于JS的window.onload与$(function (){})方法区别
weixin_30736301的博客
11-15 261
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 $(function (){})==$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。 以下是他们两者区别： 1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。$(document).read...
15. window.onload和$(function() { } )的区别
Melody5271的博客
03-01 576
window.onload和$(function() { } )的区别 1）执行时机不一样 $(function() { } )是在dom结构创建完成以后就执行，window.onload是在整个页面加载完成之后（包括页面上的资源，比如图片）才执行 2）执行次数不一样： $(function() { } )不管你jsp引入的js里定义了几个，会按照顺序依次执行，而window.o...
“js的window.onload”与“jquery的$(function() { })”区别
HD243608836的博客
02-03 570
window.onload是在页面所有的元素都加载完成后才触发$(function(){})是在页面的dom结构加载完毕后就触发 dom里的内容不一定都已经加载完成比如说一个页面有好多图片 而加载这些图片需要一定的时间window.onload必须得等到全部的图片都加载完成后才能触发而$(function(){})只要在dom加载完毕之后就会执行 图片不一定已经加载完成 ************
window.onload 、$(function()function()）、;(function(){}());的执行顺序（初）
White feathe 的博客
04-29 5703
window.onload 、$(function()function()）、;(function(){}());三个的执行顺序：   ;(function(){}()); > $(function()function()） > window.onload<!DOCTYPE html> <html> <head> <meta charset="UTF-8">
浏览器传token的方式及$(function(){})与window.onload的区别
nandao158的博客
02-23 374
 不太一样 window.onload是在页面所有的元素都加载完成后才触发 $(function(){})是在页面的dom结构加载完毕后就触发 dom里的内容不一定都已经加载完成 比如说一个页面有好多图片 而加载这些图片需要一定的时间 window.onload必须得等到全部的图片都加载完成后才能触发 而$(function(){})只要在dom加载完毕之后就会执行 图片不一定已经
$(document).ready()与window.onload的区别
No_Name_Cao_Ni_Mei的博客
07-02 493
选择使用还是取决于你的具体需求。如果你只需要确保DOM已经加载完成，并且正在使用jQuery，那么是一个更好的选择。如果你需要等待页面上的所有资源都加载完成，或者不使用jQuery，那么将更加合适。
执行多个window.onload匿名函数的方法
weixin_45190226的博客
11-26 1127
业务需求：在body里面创建一个div元素，点击div元素能够复制div节点，将复制后的div加载到原有的div节点后面，并且重新设置克隆后的div节点的样式。 JS代码特点：在JS语句中有两个window.onload匿名函数 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>执行多个window.onload匿名函数</title&g
JavaScript原生系列-页面加载完成之后执行（window onload 和 $().ready(function) 以及 body onload="">）
pcaxb的专栏
09-09 8302
转载请注明预见才能遇见的博客：http://my.csdn.net/ 原文地址：https://blog.csdn.net/pcaxb/article/details/100661841 JavaScript原生系列-页面加载完成之后执行（window.onload 和 $().ready(function) 以及 <body onload="">） 目录 1.原生window...
$(function(){})和window.onload的区别
AA18093194394的博客
07-27 563
这里可以看出两点不同：1.$(function(){})不会被覆盖，而window.onload会被覆盖2.$(function(){})在window.onload执行前执行的，$(function(){})类似于原生js中的DOMContentLoaded事件，在DOM加载完毕后，页面全部内容（如图片等）完全加载完毕前被执行。而window.onload会在页面资源全部加载完毕...
$(function(){})与window。onload区别
qq_42704649的博客
03-06 2763
通用的页面加载js有四种方式： 1.window.onload = function(){}; —-js 2.$(window).load(function(){});——Jquery 3.$(document).ready(function(){});–Jquery 4.$(function(){});———————Jquery 其中1和2为同一种，3和4为同一种 1、2表示：页面全部...
js中window onload和$(function(){})区别
weixin_43740552的博客
02-22 1117
(function())是在DOM文档树加载完之后在执行(DOM文档树加载完并不代表全部内容都加载完)。而window.onload是在页面的所有文件都加载完才执行的，也就是说(function(){})是在DOM文档树加载完之后在执行(DOM文档树加载完并不代表全部内容都加载完)。而window.onload是在页面的所有文件都加载完才执行的，也就是说(function())是在DOM文档树加载...
$(function(){})与windown.onload…
luguling200802544的专栏
06-10 435
1、$(function(){})与windown.onload的区别    jQuery代码           $(document）.ready(function(){               程序代码          })   类似于传统的javaScript代码：            window.onload=funcion(){              
window.onload=function(){}和$(function(){})的区别
weixin_30847865的博客
02-17 225
1.执行的个数的不同： window.onload()只会执行最后一个，些多个也会被最后一个覆盖。 $(function(){})可以写多个，也会执行多个，按照从上至下的顺讯执行 2.执行时间上的不同： window.onload()是在页面所有的内容加载完毕后（页面元素，图片视频，脚本文件，css文件）再执行； $(function(){})是在Dom结构加载完后就会执...
$(function(){ }与window.onload = function(){ }的区别
mq75956672的专栏
10-06 517
$(function(){ }是$(document).ready(function()的简写是jquery代码，而window.onload = function(){ }是javascript代码。 由于jQuery 是一个 JavaScript 库，所以$(function(){ }和window.onload = function(){ }在功能上是可以互换的，但执行的时间却不一样。 $(f
$(function(){})与window.onload的区别
weixin_34288121的博客
12-02 161
不太一样window.onload是在页面所有的元素都加载完成后才触发$(function(){})是在页面的dom结构加载完毕后就触发 dom里的内容不一定都已经加载完成比如说一个页面有好多图片 而加载这些图片需要一定的时间window.onload必须得等到全部的图片都加载完成后才能触发而$(function(){})只要在dom加载完毕之后就会执行 图片不一定已经加载完成 1：执行时...
window.onload() 和 $(function(){})
a5306的博客
09-06 367
再使用$(function(){})的时候，发现一直取不到元素。但是换成window.onload()则可以取到。 大概推测是页面加载问题，于是把js从header移到了footer,发现$(function(){})也可以取到值了。 要说明的是这个元素是由与另一个js生成的。 查找两个方法的说明如下： （1）window.onload(): 　　onload 属性在对象已...
$(document).ready(function() 总结以及和window.onload的区别
wdt3385的专栏
12-04 1572
转载：http://www.cnblogs.com/MikeChen/articles/1795526.html 页面加载完成后开始运行do stuff when DOM is ready　中的语句! 　　　$(document).ready(function() {        // do stuff when DOM is ready        }); 　　　选择器 　　　$
window.onload = function(
最新发布
02-16
### 正确设置和使用 `window.onload` 函数 在 JavaScript 中，`window.onload` 是一个事件处理程序属性，用于指定当整个页面完全加载完成后要运行的脚本。这包括所有的依赖资源如样式表、图像和其他媒体文件。 如果直接给 `window.onload` 赋值一个新的函数，则会覆盖之前已经赋好的任何其他 `onload` 处理器[^1]： ```javascript // 这种方式会导致后者覆盖前者 window.onload = one; window.onload = two; // 后者覆盖了前者, 只有 "two" 会被触发 ``` 为了确保可以注册多个负载事件处理器而不互相干扰，应该采用一种方法来安全地附加额外的功能而不会丢失现有的行为。下面是一个实用的例子展示如何实现这一点: #### 安全添加多个 `onload` 事件处理器 通过创建辅助函数 `addLoadEvent` 来管理这些回调，这样就可以多次调用此函数并累积所有希望被执行的任务列表，而不是简单替换掉原来的 `onload` 属性值[^2]: ```javascript function addLoadEvent(func){ var oldOnload = window.onload; if (typeof oldOnload !== 'function'){ window.onload = func; } else { window.onload = function(){ oldOnload(); func(); }; } } // 使用自定义的帮助函数添加两个不同的操作 addLoadEvent(function (){ console.log('First task completed'); }); addLoadEvent(function (){ console.log('Second task also done!'); }); ``` 这种方法允许开发者在一个页面上轻松地安排一系列按顺序执行的动作，在不破坏原有逻辑的前提下扩展功能。 值得注意的是，虽然上述技术有效解决了多监听器的问题，但在现代浏览器环境下推荐使用更灵活且不易出错的方式——即利用 `addEventListener()` 方法来订阅 `load` 事件，它支持同一类型的多个独立监听器，并且语法更加直观清晰[^3]。 对于那些熟悉 jQuery 的开发人员来说，也可以考虑使用其提供的 `.ready()` 或简化的 `$()` 形式的文档就绪状态检测机制作为替代方案之一[^4]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值