document.ready和window.onload的区别

document.ready是文档DOM结构加载完成

window.onload是指页面包含图片在内的所有元素都加载完成 

$(function(){     和 $(document).ready一样

}) 

而在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下面的 。