首先它们都是在页面所有元素(包括html标签以及引用到得所有图片,Flash等媒体)加载完毕后执行的,这是它们的共同点.
不用body.Onload()理由1：
如果我们想同时加载多个函数,我们必须这样写
<body onload="fn1(),fn2()"></body>看起来极其丑陋,如果用$(window).load()我们可以这样加载多个函数
$(window).load(function() {
alert("hello,我是jQuery!");
});
$(window).load(function() {
alert("hello,我也是jQuery");
});
这样写它会从上往下执行这两个函数,并且看起来漂亮多了.
不用body.Onload()理由2：
用body.Onload()不能够做到js和html完全分离,这是一个很严重的问题.
另外用$(window).load(function(){...})和body.onload()都存在同样一个问题,因为开始也说到了,它们都需要等到页面的所有内容
加载完毕才执行,但是如果当网速比较慢的时候,加载一个页面往往需要较长的时间(几秒到十几秒不等,甚至更长...),所以我们经常
会遇到页面还没有完全加载完毕而用户已经在操作页面了这种情况,这样页面表现出来的效果就跟我们预期的效果不一样了,
所以在这里我推荐使用$(document).ready(function(){}),或简写为$(function(){})，因为他会在页面的dom元素加载完毕后就执行,
而无需等到图片或其他媒体下载完毕.
但是有时候确实我们有需要等到页面的所有东西都加载完后再执行我们想执行的函数,所以是该使用$(window).load(function(){...})还是
该使用$(function(){})往往需要结合具体需要而作不同的选择.
最后附上一段在所有DOM元素加载之前执行的jQuery代码
<script type="text/javascript">
(function() {
alert("DOM还没加载哦!");
})(jQuery)
</script>
分享到：
相关推荐
在网页开发中，`body.onload` 和 `window.onload` 是两个常见的JavaScript事件处理函数，用于在页面完全加载后执行特定的代码。它们都是用来确保在执行任何操作之前，页面的所有资源（包括HTML、CSS、JavaScript、...
总结来说，`jQuery(document).ready()`提供了一种灵活且高效的处理DOM就绪的方式，而`window.onload()`和`body.onload`更适用于需要等待整个页面加载的场景。理解这些不同方法的用法和区别，可以帮助开发者更有效地...
在这种情况下，我们可以使用 $(window).load() 方法，这个方法会等到页面所有内容加载完毕后才会触发，并且同时又没有 onload 事件的弊端。 在实际开发中，我们可以根据实际情况选择使用 ready 事件或 onload 事件...
本文主要讨论的是jQuery中的`$.ready()`方法及其与`onload`事件、`$(window).load()`方法的区别与应用。 首先，`$.ready()`方法，通常写作`$(document).ready()`，它的主要作用是在DOM（文档对象模型）完全加载完毕...
jQuery 是一个广泛使用的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。在 jQuery 中，ready() 函数是用来...而当需要在页面所有资源加载完成后进行操作时，则应使用 window 的 load 事件。
当我们在同一个页面中同时使用 `body.onload` 和 `window.onload` 时，可能会遇到以下问题： 1. **事件覆盖**：如果两个事件处理函数被分别指定，那么后定义的函数会覆盖前一个，导致前面的函数不再执行。 2. **...
$.preLoadImages = function() { var args_len = arguments.length; for (var i = args_len; i--;) { var cacheImage = document.createElement('img'); cacheImage.src = arguments[i]; cache.push...
使用window.onload事件或$(window).load()方法的代码只能绑定一个。如果有多个onload事件绑定，最后绑定的会覆盖之前的，前一个绑定的事件里的代码将不会执行。 在原生JavaScript中： ```javascript window.onload =...
例如，如果你想在所有内容（包括图片和Flash）加载后执行特定功能，如图片的尺寸调整，可以使用$(window).load()。与OnLoad事件一样，它可以处理多个函数，而且这些函数会按照它们在脚本中的顺序执行： ```...
function Load(url) { URL = url; for (var i = secs; i >= 0; i--) { window.setTimeout('doUpdate(' + i + ')', (secs - i) * 1000); } } function doUpdate(num) { document.getElementById('ShowDiv')....
使用`$(window).load(function() {...})`，可以在HTML文档完全下载后执行指定的函数，这是对原生JavaScript中`window.onload`事件的优雅封装。 4. **动态内容的添加和加载** `$('p').appendTo('body')`可以将一个...
$.each($.parseJSON(data), function(i, v) { $("#data").append(v.name); }); // 销毁iframe，保证安全 ifr.contentWindow.document.write(""); ifr.contentWindow.close(); document.body.removeChild(ifr)...
如果需要设置多个 `onload` 事件，可以用分号隔开，例如： ```html <body onload="alert(1); alert(2); alert(3)"> ``` 这将按照顺序显示三个警告框。 2. `window.onload`： JavaScript 代码中，可以使用 `...
最后，通过监听`window`的`load`事件，确保在页面完全加载后执行`dyniframeSize`函数。 #### 总结 实现`iframe`自适应高度的关键在于监听其内部页面的加载事件，并动态调整`iframe`的高度，使其能够根据内容自动...
在实际开发中，为了支持多个页面加载完成后的事件处理，通常建议使用事件监听器的方式添加多个处理函数，而不是直接覆盖window.onload，示例如下： ```javascript function onLoadHandler() { // 页面加载完毕后...
#### 方法二：使用`window.onload`函数调整高度 这种方法利用`window.onload`事件来调整`<iframe>`的高度。具体实现如下： ```javascript window.onload = function () { frames["index2"].location.href = "/...
需要注意的是，如果在HTML页面的<body>标签中使用了onload属性指定了一个加载完成后要执行的函数，比如<body onload="load()">，那么可能会导致$(document).ready()事件无法正常触发。这一点在实际使用中需要特别...