window.onload、$(window).load()和$(document).ready()

onload是一个事件 ,ready()和load()是一个方法
事件是你通过某种动作触发的,比如单击、双击、鼠标划过等等。。。方法是代表它对一个事情的处理,比如show(),我可以在触发单击事件的时候调用show(),也可以在双击的时候调用

window.onload

window.onload必须等到整个页面包括图片、dom结构的所有元素加载完毕后才能执行

https://www.cnblogs.com/magicgua/p/4363903.html
写法如下

window.onload=function(){

}

 

$(window).load()(1.8版本弃用,3.0版本删除)

$(window).load() 和window.οnlοad=function(){}是页面中的所有元素(包括图片、flash)等都加载完毕后,才能执行;
写法

$( window ).load(function() {
  // Run code
});

//jquery官网的一个实例(load方法可以用在其他元素上)
$( "img.userIcon" ).load(function() {
  if ( $( this ).height() > 100) {
    $( this ).addClass( "bigImg" );
  }
});

 

$(document).ready()

(我在官网上看的翻译是.ready()方法提供了一种在页面的文档对象模型(DOM)变得可以安全操作时立即运行JavaScript代码的方法)

$(document).ready()是DOM结构(不包含图片等非文字媒体文件)绘制完毕后就执行,不必等到加载完毕。 
写法如下

$(document).ready(function(){

});
//或者
$(function(){

});

.ready()可以写好几个,每个都执行
.onload()只能写一个,后面的会覆盖前面的,而$(window).load()可以加载多个函数

 

转载于:https://my.oschina.net/u/3759734/blog/1606190

<think>好的,用户问的是“window.onload 用jq的写法”。首先,我需要确认用户的需求。他们可能是在使用jQuery,并且想知道如何用jQuery的方式替代原生的window.onload事件。 首先,我得回忆一下jQuery中处理文档加载完成的方法。jQuery有$(document).ready(),通常简写为$()。不过用户提到的是window.onload,这document.ready有什么区别呢?document.ready是在DOM加载完成后执行,而window.onload是在整个页面包括图片等资源都加载完成后才触发。所以用户可能需要的是等价于window.onload的jQuery方法。 但jQuery的$(window).on('load', function() { ... })才是等价于window.onload的。不过用户可能不太清楚这个区别,或者他们可能只是需要确保所有元素都加载完毕,包括图片。这时候需要明确回答两种方法的区别。 另外,用户可能对jQuery的简写方式不太熟悉,所以需要给出具体的代码示例。比如,使用$(window).on('load', handler)或者更简洁的$().on('load', handler),不过后者可能不常见,通常还是用$(window)更明确。 同时,还要考虑是否需要考虑兼容性问题,或者是否有其他方法可以达到类似效果。比如,使用$(document).ready()虽然不是完全等价,但有时候用户可能实际需要的是DOM加载完成,而不是所有资源加载完毕。这时候可以解释两者的不同,让用户根据情况选择。 可能还需要提醒用户注意使用简写方式时的潜在问题,比如与其他库的冲突,或者代码可读性的问题。另外,如果用户使用的是较新版本的jQuery,方法是否有变化,比如on()方法在jQuery 1.7之后推荐使用,所以应该没问题。 最后,给出一个完整的例子,包括HTML结构jQuery代码,确保用户能够直接复制并修改使用。同时,可能需要指出在实际开发中,除非需要操作图片尺寸或位置,否则通常使用document.ready就足够了,这样能更快执行代码。 总结一下,我需要给出正确的jQuery写法,解释不同方法的区别,并提供示例代码,确保用户能够正确应用。</think>在 jQuery 中,`window.onload` 的等价写法是通过监听 `window` 对象的 `load` 事件。jQuery 提供了简洁的事件绑定方式,推荐使用 `$(window).on("load", function() { ... })` 来替代原生的 `window.onload`。 --- ### ✅ jQuery 等价写法 ```javascript $(window).on("load", function() { // 页面及所有资源(如图片、脚本等)加载完成后执行的代码 console.log("页面已完全加载"); }); ``` --- ### 📌 与 `$(document).ready()` 的区别 | 事件类型 | jQuery 写法 | 触发时机 | 适用场景 | |----------|-------------|----------|----------| | `window.onload` | `$(window).on("load", ...)` | 页面所有资源(包括图片、样式等)加载完成后触发 | 操作图片尺寸、依赖完整页面资源 | | `document.ready` | `$(document).ready(function() { ... })` 或简写为 `$(function() { ... })` | DOM 加载完成后触发(不等待图片等资源) | 初始化 DOM、绑定事件等基本操作 | --- ### 🧩 示例代码 ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery Window Load 示例</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(window).on("load", function() { console.log("页面及所有资源加载完成"); // 可以安全地操作图片尺寸 var imgWidth = $("#myImg").width(); console.log("图片宽度为:" + imgWidth); }); </script> </head> <body> <h1>jQuery Window Load 示例</h1> <img id="myImg" src="example.jpg" alt="示例图片"> </body> </html> ``` --- ### 📝 注意事项 - `$(window).on("load", ...)` 会等待所有资源加载完成,可能延迟执行时间。 - 若只需操作 DOM,推荐使用 `$(document).ready()` 或其简写形式 `$(function() { ... })`,以提升页面响应速度。 - 避免在 `load` 事件中执行过多同步操作,以免影响用户体验。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值