tsailer
- 浏览: 53063 次
- 性别:
- 来自: 深圳
-
jquery 学习之一(js中window.onload与jquery中$(document.ready())的区别)
耳听为虚,眼见为实。通过下面的实例可查看两者的异同（注意：aa.jpg最好是一张大容量图片）
说明：$(document).ready()是在DOM结构载入完后执行的，而window.onload是得在所有文件都加载完后执行的，注意区别，一个是DOM加载完，一个是所有文件加载完
所谓DOM加载完，就是指DOM模型加载完，也就是指代码加载完。
两者最大的区别，就是DOM加载完之后，不必再去等相应的图片加载完就可以执行JS代码了。
补充：(两者的具体用法)
window.onload用法
jquery用法:
来源于
http://blog.sina.com.cn/s/blog_5d95e3130100qlh6.html
虽然原生JS没有给我们提供ready方法，但我们也可以自己简单构建一个，尽管没有jQuery中那么强大，但也勉强够用。
<script language='javascript'>
document.ready(function(){
alert('Document is ready!');
});
</script>
打开页面，看到效果没？YES，这就是去掉了 $(); 的 document.ready(); 咱不再依赖 jQuery，但如果你的站点已经使用了 jQuery，就不用再多此一举了。
为保护作者版权，特此连接原文作者连接：http://www.vgot.net/?A65.htm
另外：经实践得知，两者都可以加载多个函数
另外还有一个来自于 PHPWind 论坛程序中某个脚本中的函数片段（由于字数限制，此处省略，详细的可看原文作者：http://www.vgot.net/?A65.htm ）
其实 window.onload 也并非是一无用处，很多情况下一些B/S软件需要页面全部加载后才提供用户相关功能，这样 window.onload 就可以提供一种“加载中”的功能，又或者是页面内容很少，完全无需 document.ready(); 根据各种情况，应该合理的使用 onload 和 ready。
通常我们想要在页面内容加载完成后运行 JS 时，都会使用 window.onload 来处理，比如：
<script language="javascript">
window.onload = function () {
alert('Hello World!');
}
</script>
这段代码将在页面载入完成后弹出一个 "Hello World!" 的警告框，但是众所周知，window.onload 的特点是页面元素全部加载完成后才执行，比如页面内有大量的图片之类，当打开网页时，其实相关的 DOM 已经全部加载完成，此时已经可以执行你想要执行的脚本了，可是图片的加载速度要很慢于页面的 HTML，这显然在大多数情况下不是我们想要的。
jQuery 提供一个 $(document).ready(); 来解决此问题，当页面 DOM 加载完成后，ready() 里的函数便会立即执行，但如果我们在不使用 jQuery 的情况下呢？
好了，废话不多说，大家都明白想要什么，以下是来自国外网站的一段代码，功能同等于 jQuery 的 $(document).ready();
看代码：
把这段代码放到你的页面中或者某个导入的脚本中，然后你就可以像下面这样使用了：
来源
http://hi.baidu.com/sch362017466/blog/item/fdbeb1ec148935dbb21cb172.html
window.onload=function(){}
页面中只能有一个，
可能覆盖
<body onload="func()">
耳听为虚,眼见为实。通过下面的实例可查看两者的异同（注意：aa.jpg最好是一张大容量图片）
<html>
<head>
<script type='text/javascript' src='jquery-1.3.2.min.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
alert("先加载DOM结构,再弹出对话框,后加载大型图片及内容");
});
//***************
//window.onload=function(){ alert("先加载DOM结构,后加载大型图片及内容,再弹出对话框");}
//***************
</script>
</head>
<body>
<p>大量内容</p>
<img src='aa.jpg'/>
</body>
</html>
说明：$(document).ready()是在DOM结构载入完后执行的，而window.onload是得在所有文件都加载完后执行的，注意区别，一个是DOM加载完，一个是所有文件加载完
所谓DOM加载完，就是指DOM模型加载完，也就是指代码加载完。
两者最大的区别，就是DOM加载完之后，不必再去等相应的图片加载完就可以执行JS代码了。
补充：(两者的具体用法)
window.onload用法
<script type='text/javascript'>
function winready(){
document.getElementByIdx_x.('load').style.display='none';
}
window.onload=winready; //或者window.onload=function(){winready();}
</scritp>
jquery用法:
<script type='text/javascript'>
$(document).ready(function(){
$('#load').css('display','none');
})
</script>
来源于
http://blog.sina.com.cn/s/blog_5d95e3130100qlh6.html
虽然原生JS没有给我们提供ready方法，但我们也可以自己简单构建一个，尽管没有jQuery中那么强大，但也勉强够用。
document.ready = function(fn) {
// 标准浏览器中，我们监听DOMContentLoaded事件来判断DOM加载完毕
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", function() {
document.removeEventListener("DOMContentLoaded", fn, false);
}, false);
}
// IE中我们根据document.documentElement.doScroll("left")出错，来判断DOM加载完毕
else {
if (document.documentElement.doScroll && window == window.top) (function(){
try {
document.documentElement.doScroll("left");
} catch (error) {
setTimeout(fn, 0);
return;
}
})();
}
}
<script language='javascript'>
document.ready(function(){
alert('Document is ready!');
});
</script>
打开页面，看到效果没？YES，这就是去掉了 $(); 的 document.ready(); 咱不再依赖 jQuery，但如果你的站点已经使用了 jQuery，就不用再多此一举了。
为保护作者版权，特此连接原文作者连接：http://www.vgot.net/?A65.htm
另外：经实践得知，两者都可以加载多个函数
另外还有一个来自于 PHPWind 论坛程序中某个脚本中的函数片段（由于字数限制，此处省略，详细的可看原文作者：http://www.vgot.net/?A65.htm ）
其实 window.onload 也并非是一无用处，很多情况下一些B/S软件需要页面全部加载后才提供用户相关功能，这样 window.onload 就可以提供一种“加载中”的功能，又或者是页面内容很少，完全无需 document.ready(); 根据各种情况，应该合理的使用 onload 和 ready。
通常我们想要在页面内容加载完成后运行 JS 时，都会使用 window.onload 来处理，比如：
<script language="javascript">
window.onload = function () {
alert('Hello World!');
}
</script>
这段代码将在页面载入完成后弹出一个 "Hello World!" 的警告框，但是众所周知，window.onload 的特点是页面元素全部加载完成后才执行，比如页面内有大量的图片之类，当打开网页时，其实相关的 DOM 已经全部加载完成，此时已经可以执行你想要执行的脚本了，可是图片的加载速度要很慢于页面的 HTML，这显然在大多数情况下不是我们想要的。
jQuery 提供一个 $(document).ready(); 来解决此问题，当页面 DOM 加载完成后，ready() 里的函数便会立即执行，但如果我们在不使用 jQuery 的情况下呢？
好了，废话不多说，大家都明白想要什么，以下是来自国外网站的一段代码，功能同等于 jQuery 的 $(document).ready();
看代码：
<script language='javascript'>
(function () {
var ie = !!(window.attachEvent && !window.opera);
var wk = /webkit\/(\d+)/i.test(navigator.userAgent) && (RegExp.$1 < 525);
var fn = [];
var run = function () { for (var i = 0; i < fn.length; i++) fn[i](); };
var d = document;
d.ready = function (f) {
if (!ie && !wk && d.addEventListener)
return d.addEventListener('DOMContentLoaded', f, false);
if (fn.push(f) > 1) return;
if (ie)
(function () {
try { d.documentElement.doScroll('left'); run(); }
catch (err) { setTimeout(arguments.callee, 0); }
})();
else if (wk)
var t = setInterval(function () {
if (/^(loaded|complete)$/.test(d.readyState))
clearInterval(t), run();
}, 0);
};
})();
</script>
把这段代码放到你的页面中或者某个导入的脚本中，然后你就可以像下面这样使用了：
来源
http://hi.baidu.com/sch362017466/blog/item/fdbeb1ec148935dbb21cb172.html
window.onload=function(){}
页面中只能有一个，
可能覆盖
<body onload="func()">
分享到：
发表评论
-
JS的replace方法
2011-08-05 10:34 1201from http://www.cnblogs.com/mxw ... -
要写出在各大主流浏览器上都兼容的JS代码，就要关注他们的区别，下是IE和FF综合考虑的通用DOM！
2011-08-04 14:36 921来源于 http://hi.baidu.com/g ... -
<input type="text" id="start" />输入true取布尔true
2011-07-28 14:22 880"true" and true is di ... -
Js获取当前日期时间+日期验证+判断闰年+日期的天数差+日期格式化+JS判断某年某月有多少天
2011-07-27 17:47 4813字符串转日期型+Js当前日期时间+日期验证+判断闰年+日期的天 ... -
高效http页面优化法则一【JS对DOM的操作】
2011-07-08 10:58 1033很多人都认为JS的效率 ... -
form page jump
2011-07-07 10:49 854页面跳转 <input type="hidd ... -
jquery widget sample
2011-07-06 08:39 3447<!DOCTYPE html PUBLIC &quo ... -
jquery apply wait for update
2011-07-05 10:36 1658<!DOCTYPE html PUBLIC &quo ... -
deal with a great quantity domelements add event wait for update
2011-06-29 14:34 1159<!DOCTYPE html PUBLIC " ... -
JS中的attachEvent、addEventListener如何传递参数
2011-06-29 14:02 6268<!DOCTYPE html PUBLIC " ... -
js operate frame
2011-06-14 14:04 1193我的页面框架如下 <frameset rows=&quo ... -
js中frame的调用
2011-06-14 12:27 1044js中frame的调用 关键词 ... -
js 事件冒泡 和其它问题
2011-06-10 09:25 821js事件冒泡 <html> <head> ... -
js inner iframe get dom of parent
2011-06-02 15:00 732parent.$("#id");//jqu ... -
ajax
2011-05-27 14:18 646<!DOCTYPE html PUBLIC " ... -
add event to all the dom elements in one page except one dom
2011-05-18 10:20 869<!DOCTYPE html PUBLIC &quo ... -
count down 倒计时
2011-05-13 12:42 575<!DOCTYPE html PUBLIC " ... -
js IE与FireFox的兼容性问题 事件
2011-05-13 09:16 1029# window.event * IE：有windo ... -
deal with href remove the same element
2011-05-11 09:38 800var url="http://zhidao.bai ... -
document.form.item 问题集合的(0)和[0]取法
2011-05-09 15:10 1952<!DOCTYPE html PUBLIC " ...
相关推荐
脱离document.onload和window.onload的onload事件，可多次添加加载事件！
总结来说，`jQuery(document).ready()`提供了一种灵活且高效的处理DOM就绪的方式，而`window.onload()`和`body.onload`更适用于需要等待整个页面加载的场景。理解这些不同方法的用法和区别，可以帮助开发者更有效地...
总的来说，了解和掌握`body.onload`和`window.onload`的区别和用法，有助于优化网页加载和交互体验，提高用户满意度。在实际项目中，根据需求选择合适的事件，或者结合使用，能够更好地控制页面的加载顺序和执行时机...
在JavaScript和jQuery中，`$(document).ready()`和`$(window).load()`是两种常见的事件绑定函数，它们分别用于在不同的页面加载阶段执行相应的代码。理解它们的区别和执行顺序对于优化网页性能和确保脚本正确运行至...
在网页开发过程中，`window.onload` 和 `insertAfter()` 方法是两个非常实用且重要的技术点。它们可以帮助开发者更好地控制页面加载流程以及动态地操作DOM（文档对象模型）。本文将深入探讨这两个方法的基本原理、...
windows
在JavaScript和jQuery中，`window.onload()` 和 `$(document).ready()` 都是用于处理页面加载事件的关键函数，但它们的执行时机和用法存在显著差异。了解这些区别对于优化前端性能和确保代码正确执行至关重要。 1. ...
在JavaScript和jQuery的世界里，了解`$...理解`$(document).ready()`和`window.onload`的区别以及它们在不同浏览器中的行为，可以帮助开发者编写更稳定、兼容性更好的代码，减少由于加载顺序问题导致的用户体验问题。
本文将深入探讨`document.ready`和`window.onload`这两个事件的区别。 `document.ready`是jQuery库提供的一种方法，它的全称是`$(document).ready()`，它的主要作用是在DOM结构构建完成，但图像或其他资源可能尚未...
`window.onload` 事件和 `$(document).ready()` 方法的主要区别在于执行的时机。`window.onload` 事件是在页面中的所有元素都已经加载完毕后触发的，而 `$(document).ready()` 方法是在 DOM 加载完毕后执行的，虽然...
window.onload与$(function(){})区别包括页面所有的图片加载完成才会回调(晚)只能有一个监听回调页面加载完成就回调(早)可以有多个监听。
3. 如果可能，尝试将`$(document).ready()`中的代码移至`window.onload`事件中，看看是否能正常执行，以确定问题是否与DOM加载有关。 4. 如果有多个库在使用`$`，考虑使用`jQuery.noConflict()`来避免冲突。 通过...
<body onload="window.parent.opener=null;window.close();"> ``` 这段代码的作用是在页面加载完成后立即关闭当前窗口。需要注意的是，这种方式可能也会受到浏览器的弹出窗口拦截机制的影响。为了确保兼容性更好...
在JavaScript和jQuery的世界里，`window.onload` 和 `$(document).ready()` 都是用来确保页面内容加载后执行特定脚本的事件，但它们之间存在一些关键的区别。理解这些差异对于编写高效、响应式的网页至关重要。 ...
两者的用法在很多情况下非常相似，但它们之间也存在一些关键的区别，以下就是$(document).ready()和window.onload的区别浅析。 1. 执行时间上的区别 $(document).ready()方法仅需要DOM元素全部加载完成即可执行，这...
$(document).ready()不同于window.onload。window.onload是在整个页面（包括所有的依赖资源如图片、样式表等）加载完成后才会执行。它更适合用于执行依赖于外部资源完全加载的任务，例如计算页面元素的尺寸。 #### ...
本文将深入探讨如何使用JavaScript来监听页面渲染完成的时间，并对比两种常见方法：`window.onload`和jQuery的`$(document).ready`。 首先，我们来看`window.onload`事件。这个事件会在页面中所有的资源，包括HTML...
window.onload = function () { console.log('window.onload 方式执行') } $(document).ready(function () { console.log('$(document).ready(function(){}) 方式执行') })