jquery 学习之一(js中window.onload与jquery中$(document.ready())的区别)
耳听为虚,眼见为实。通过下面的实例可查看两者的异同（注意：aa.jpg最好是一张大容量图片）
Java代码<html> <head> <scripttype='text/javascript'src='jquery-1.3.2.min.js'></script> <scripttype='text/javascript'> $(document).ready(function(){ alert("先加载DOM结构,再弹出对话框,后加载大型图片及内容"); }); //*************** //window.οnlοad=function(){alert("先加载DOM结构,后加载大型图片及内容,再弹出对话框");} //*************** </script> </head> <body> <p>大量内容</p> <imgsrc='aa.jpg'/> </body> </html>
说明： $(document).ready()是在DOM结构载入完后执行的，而window.onload是得在所有文件都加载完后执行的，注意区别，一个是DOM加载完，一个是所有文件加载完
所谓DOM加载完，就是指DOM模型加载完，也就是指代码加载完。
两者最大的区别，就是DOM加载完之后，不必再去等相应的图片加载完就可以执行JS代码了。
补充：(两者的具体用法)
window.onload用法
Java代码<scripttype='text/javascript'> functionwinready(){ document.getElementByIdx_x.('load').style.display='none'; } window.οnlοad=winready;//或者window.οnlοad=function(){winready();} </scritp>
jquery用法:
Java代码<scripttype='text/javascript'> $(document).ready(function(){ $('#load').css('display','none'); }) </script>
来源于
/s/blog_5d95e3130100qlh6.html
虽然原生JS没有给我们提供ready方法，但我们也可以自己简单构建一个，尽管没有jQuery中那么强大，但也勉强够用。
Java代码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，就不用再多此一举了。
为保护作者版权，特此连接原文作者连接：/?A65.htm
另外：经实践得知，两者都可以加载多个函数
另外还有一个来自于 PHPWind 论坛程序中某个脚本中的函数片段（由于字数限制，此处省略，详细的可看原文作者：/?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();
看代码：
Java代码<scriptlanguage='javascript'> (function(){ varie=!!(window.attachEvent&&!window.opera); varwk=/webkit\/(\d+)/i.test(navigator.userAgent)&&(RegExp.$1<525); varfn=[]; varrun=function(){for(vari=0;i<fn.length;i++)fn[i]();}; vard=document; d.ready=function(f){ if(!ie&&!wk&&d.addEventListener) returnd.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);} })(); elseif(wk) vart=setInterval(function(){ if(/^(loaded|complete)$/.test(d.readyState)) clearInterval(t),run(); },0); }; })(); </script>
把这段代码放到你的页面中或者某个导入的脚本中，然后你就可以像下面这样使用了：
来源
/sch36466/blog/item/fdbeb1ec148935dbb21cb172.html
