做web开发时常用Jquery中$(document).ready()和JavaScript中的window.onload要领，两者都是要在页面加载完成以后加载的要领，但是这两者还是有很大区另外。比来遇到了这样的问题，盘问了多篇文章，做一下总结。
简单来说，要以用以下张表来暗示 ：
Jquery的ready()与Javascrpit的load() window.onload() $(document).ready()加载时机
必需期待网页全部加载完毕（包孕图片等），然后再执行JS代码
只需要期待网页中的DOM布局加载完毕，就能执行JS代码
执行次数
只能执行一次，如果第二次，那么第一次的执行会被笼罩
可以执行多次，第N次都不会被上一次笼罩
举例
以下代码无法正确执行：
window.onload = function() { alert(“text1”);}; window.onload = function() { alert(“text2”);};
功效只输出第二个
以下代码正确执行：
$(document).ready(function(){alert(“Hello”)});
$(document).ready(function(){alert(“Hello”)});
功效两次都输出
简写方案 无 $(function () {})
一般情况下window的load()都是用来设置body标签的onload事件.但onload事件是要在页面的元素全部加载完了才触发的,这也包孕页面上的图片，以及大的表格数据。如果页面上图片较多或图片太大,加载需要较多时间，就会导致页面无响应，或者用户做了其它操纵了。
而Jeuery中的ready()则是在页面的dom(节点)加载完后就可以做相应的操纵,而不用期待全部元素加载完成.好比只知道页面某处有一张图片，，而不必然要等它显示出来就可以为它绑定点击要领。
load()一般不建议使用，这里主要讲一下( $(selector).ready())。
道理:
在jquery脚本加载的时候,会设置一个isReady的符号,监听DOMContentLoaded事件(这个不是什么浏览器都有的,差别浏览器,jquery运作方法不一样).固然遇到挪用ready函数的时候,如果isReady未被设置,那就是说页面未加载完,就会把要执行的函数用一个数组缓存起来,当页面加载完后,再把缓存的函数一一执行.
Jquery中的详细代码分析:
ready: function(fn) { // 绑定监听器 bindReady(); // 如果 DOM 加载完成 if ( jQuery.isReady ) // 顿时运行此函数 fn.call( document, jQuery ); // 否则生存起来 else // 把函数插手缓存数组中 jQuery.readyList.push( function() { return fn.call(this, jQuery); } ); return this; }
固然，jquery对差此外浏览器dom加载完成的通知 bindReady()函数也是差此外
var readyBound = false; function bindReady(){ if ( readyBound ) return; readyBound = true; // Mozilla,opera,webkitnightlies撑持DOMContentLoaded事件 if ( document.addEventListener && !jQuery.browser.opera) // 直接使用事件回调即可 document.addEventListener( "DOMContentLoaded", jQuery.ready, false ); // 如果是ie并且不是嵌在frame中 // 就需要不停地查抄文档是否加载完 if ( jQuery.browser.msie && window == top ) (function(){ if (jQuery.isReady) return; try { document.documentElement.doScroll("left"); } catch( error ) { setTimeout( arguments.callee, 0 ); return; } // and execute any waiting functions jQuery.ready(); })(); if ( jQuery.browser.opera ) document.addEventListener( "DOMContentLoaded", function () { if (jQuery.isReady) return; for (var i = 0; i < document.styleSheets.length; i++) if (document.styleSheets[i].disabled) { setTimeout( arguments.callee, 0 ); return; } // and execute any waiting functions jQuery.ready(); }, false); if ( jQuery.browser.safari ) { var numStyles; (function(){ if (jQuery.isReady) return; if ( document.readyState != "loaded" && document.readyState != "complete" ) { setTimeout( arguments.callee, 0 ); return; } if ( numStyles === undefined ) numStyles = jQuery("style, link[rel=stylesheet]").length; if ( document.styleSheets.length != numStyles ) { setTimeout( arguments.callee, 0 ); return; } // and execute any waiting functions jQuery.ready(); })(); } // A fallback to window.onload, that will always work jQuery.event.add( window, "load", jQuery.ready ); } }
这里最要注意的是，IE只有在页面不是嵌入frame中的情况下才和其它浏览器等一样，在DOM加载完成以后就执行$(document).ready()的内容。