理解window.onload 和document.ready的区别

刚写js的时候， 我喜欢用window.onload(); 有一次被人家说这是很土鳖的写法，哈哈 。当时没理他 ，心里暗骂；

最近偶尔看到一个文章，提到window.onload()是土鳖写法，呵呵^_^ 我决定，记录一下， 证实一下这样写确实很土鳖！

window.onload()是在dom文档树和所有文件都加载完才执行， 包括图片这些资源。是不是很墨迹?

而在jquery里， 我们可以看到两个写法：$(function(){})和$(document).ready(function(){}),其实这两个是一样的，都是在dom文档树加载完成之后执行。（并不是代表全部文件加载完）。所以，$(document).ready是比window.onload要快的。现在是觉得这个写法有点土鳖哦。

其实jquery的$(document).ready()是根据原生js的DOMContentLoaded时间实现的，我们来看一下源码；

 document.ready = function (callback) {
            ///兼容FF,Google
            if (document.addEventListener) {
                document.addEventListener('DOMContentLoaded', function () {
                    document.removeEventListener('DOMContentLoaded', arguments.callee, false);
                    callback();
                }, false)
            }
             //兼容IE
            else if (document.attachEvent) {
                document.attachEvent('onreadystatechange', function () {
                      if (document.readyState == "complete") {
                                document.detachEvent("onreadystatechange", arguments.callee);
                                callback();
                       }
                })
            }
            else if (document.lastChild == document.body) {
                callback();
            }
        }

ok。我们看到了 ， DOMContentLoaded。正常情况下，如果我们把js放在HTML结构上面去执行，是没法对DOM进行操作的，如果我们不用土鳖的window.onload方法的话， 用DOMContentLoaded的话也完全可以解决这个问题，其实就是相当于就是$(document).ready();

亲自写代码试试吧：

window.onload = function () {
            alert('im window.onload');

        };
        document.ready(function () {
            alert('im document.ready');

        });

显然，结果是先alert下面的 。