tsailer
- 浏览: 51560 次
- 性别:
- 来自: 深圳
-
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 1143from http://www.cnblogs.com/mxw ... -
要写出在各大主流浏览器上都兼容的JS代码，就要关注他们的区别，下是IE和FF综合考虑的通用DOM！
2011-08-04 14:36 897来源于 http://hi.baidu.com/g ... -
<input type="text" id="start" />输入true取布尔true
2011-07-28 14:22 836"true" and true is di ... -
Js获取当前日期时间+日期验证+判断闰年+日期的天数差+日期格式化+JS判断某年某月有多少天
2011-07-27 17:47 4727字符串转日期型+Js当前日期时间+日期验证+判断闰年+日期的天 ... -
高效http页面优化法则一【JS对DOM的操作】
2011-07-08 10:58 1000很多人都认为JS的效率 ... -
form page jump
2011-07-07 10:49 829页面跳转 <input type="hidd ... -
jquery widget sample
2011-07-06 08:39 3412<!DOCTYPE html PUBLIC &quo ... -
jquery apply wait for update
2011-07-05 10:36 1624<!DOCTYPE html PUBLIC &quo ... -
deal with a great quantity domelements add event wait for update
2011-06-29 14:34 1124<!DOCTYPE html PUBLIC " ... -
JS中的attachEvent、addEventListener如何传递参数
2011-06-29 14:02 6246<!DOCTYPE html PUBLIC " ... -
js operate frame
2011-06-14 14:04 1170我的页面框架如下 <frameset rows=&quo ... -
js中frame的调用
2011-06-14 12:27 1019js中frame的调用 关键词 ... -
js 事件冒泡 和其它问题
2011-06-10 09:25 780js事件冒泡 <html> <head> ... -
js inner iframe get dom of parent
2011-06-02 15:00 704parent.$("#id");//jqu ... -
ajax
2011-05-27 14:18 613<!DOCTYPE html PUBLIC " ... -
add event to all the dom elements in one page except one dom
2011-05-18 10:20 843<!DOCTYPE html PUBLIC &quo ... -
count down 倒计时
2011-05-13 12:42 552<!DOCTYPE html PUBLIC " ... -
js IE与FireFox的兼容性问题 事件
2011-05-13 09:16 990# window.event * IE：有windo ... -
deal with href remove the same element
2011-05-11 09:38 772var url="http://zhidao.bai ... -
document.form.item 问题集合的(0)和[0]取法
2011-05-09 15:10 1899<!DOCTYPE html PUBLIC " ...
相关推荐
脱离document.onload和window.onload的onload事件，可多次添加加载事件！
window.onload insertAfter()
window.onload与$(function(){})区别包括页面所有的图片加载完成才会回调(晚)只能有一个监听回调页面加载完成就回调(早)可以有多个监听。
在jquery中，则使用$(document).ready()方法。下面介绍一下两者的区别。 [removed]() $(document).ready() 执行时机 在页面所有元素（包括图片，引用文件）加载完后执行。 页面中所有HTML DOM，CSS DOM结构...
网上普遍的说法是$(document).ready()是在页面DOM解析完成后执行，而onload事件是在所有资源都准备完成之后才执行，也就是说$(document).ready()是要在onload之前执行的，尤其当页面图片较大较多的时候，这个时间差...
window.onload = function () { console.log('window.onload 方式执行') } $(document).ready(function () { console.log('$(document).ready(function(){}) 方式执行') })
<!...<html xmlns="http://www.w3.org/1999/xhtml" > function GetPageSize() { var scrW, scrH; if(window.innerHeight && window.scrollMaxY) ... scrW = window.innerWidth ...<body onload="main();"> </html>
常见的方法有使用window.onload和jQuery的(document).ready两种。其中，window.onload方法是页面所有资源加载完成之后触发，因此性能较差；(document).ready方法是在页面dom元素加载完成之后触发，性能较好。 总体...
有需要的朋友是最好的参考资料。希望有所帮助！
可能你也碰到过这种情况,就是在js的代码中用了[removed]后,可能会影响到body中的onload事件。你可以全写在body中，也可以全放到... 代码如下: if (document.all){ window.attachEvent(‘onload’,函数名)//IE中 } els
主要介绍了全面解析jQuery $(document).ready()和JavaScript onload事件的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下
我们知道，在javascript中用来执行页面加载中的操作时候，我们会使用windows.onload=function(){}或者windows.onload=函数名(),也可以在body中调用onload事件调用方法即可，在jQuery中也有相当的代码
Document Information Properties Section 14.5. Forms Section 14.6. Images Section 14.7. Links Section 14.8. Anchors Section 14.9. Applets Section 14.10. Embedded Data Chapter 15. Forms...
if($.$preLoad&&$dp.status==0)E(Y,"onload",function(){U(null,true)});if(!Y[N].docMD){E(Y[N],"onmousedown",D,true);Y[N].docMD=true}if(!V[N].docMD){E(V[N],"onmousedown",D,true);V[N].docMD=true}E(Y,...
window.onload = function() { var myShakeEvent = new Shake({ threshold: 15 }); myShakeEvent.start(); window.addEventListener('shake', shakeEventDidOccur, false); function ...
3. $(document).ready()与window.onload使用场合类似，当有差异 4. jQuery代码中常见的元素包括工厂函数、选择器和方法 5. jQuery程序代码的特殊：包含$符号和连缀操作 6. 每个页面都有对应的DOM模型，DOM模型包括...
selenium会弹出网页窗口，因为它重写了window.open在文件selenium-browserbot.js函数BrowserBot.prototype.modifyWindowToRecordPopUpDialogs中的newOpen，但这必须在window.onload之后创建才有效。对于HTTPS安全性...
腾迅Web前端开发工程师笔试题及答案 ...function elementName(evt){ evt = evt|| window.... window.onload = function(){ var el = document.getElementsByTagName('body'); el[0].onclick = elementName; } ......