window.onload 跟 $(document).ready 区别待续. _Web前端

window.onload 和 $(document).ready 区别待续......
jquery 学习之一(js中window.onload与jquery中$(document.ready())的区别)

耳听为虚,眼见为实。通过下面的实例可查看两者的异同（注意：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'>

(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()">

window.onload 跟 $(document).ready 区别 待续.

window.onload 跟 $(document).ready 区别待续.