jquery中$ready和window.onload的区别 jquery ready 与window.onload的有什...
jquery\u91ccinit\u548cready\u5f97\u533a\u522b\u5b66jquery\u7684\u7b2c\u4e00\u4ef6\u4e8b\u5c31\u662f\u5728 $(document).ready()\u51fd\u6570\u4e2d\u5199\u4ee3\u7801\uff0c\u6240\u4ee5\u4e00\u5207\u90fd\u5728dom\u5143\u7d20\u52a0\u8f7d\u540e\u6267\u884c\u3002\u4f46\u662f\u5728jQuery
Mobile\u4e2d\uff0cAJAX\u4f1a\u6839\u636e\u4f60\u7684\u5bfc\u822a\u628a\u6bcf\u4e2a\u9875\u9762\u7684\u5185\u5bb9\u52a0\u8f7d\u5230dom\u4e2d\uff0c\u800cDOM
ready\u51fd\u6570\u53ea\u662f\u5728\u7b2c\u4e00\u4e2a\u9875\u9762\u52a0\u8f7d\u5b8c\u6bd5\u624d\u4f1a\u6267\u884c\u3002\u6240\u4ee5\u8981\u5728\u4efb\u4f55\u65b0\u9875\u9762\u52a0\u8f7d\u5e76\u521b\u5efa\u662f\u6267\u884c\u811a\u672c\uff0c\u5c31\u9700\u8981\u7ed1\u5b9apageinit\u4e8b\u4ef6\u3002
window.onload\u662f\u5728\u9875\u9762\u6240\u9700\u8d44\u6e90\u52a0\u8f7d\u5b8c\u6210\u89e6\u53d1\uff0c\u5305\u62ec\u56fe\u7247\u7b49\u8d44\u6e90jqueryready\u662f\u5728Domcontentloaded\u4e0b\u89e6\u53d1\uff0c\u5982\u679c\u6d4f\u89c8\u5668\u4e0d\u652f\u6301\u4f1a\u9000\u5316\u5230onload\u533a\u522b\u5728\u4e8e\uff0cDomContentLoaded\u662f\u5728dom\u89e3\u6790\u5b8c\u6210\u4e0b\u89e6\u53d1\uff0c\u5b83\u4e0d\u8981\u6c42\u56fe\u7247\u5df2\u7ecf\u4e0b\u8f7d\u5b8c\u6210\u6240\u4ee5\u6574\u4f53\u6765\u8bf4\u5b83\u8981\u6bd4onload\u8003\u524d\u4e00\u4e9b\uff0c\u540c\u65f6\u53c8\u662f\u5728dom\u8282\u70b9\u53ef\u7528\u7684\u60c5\u51b5\u4e0b\u89e6\u53d1
做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 functionsjQuery.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 functionsjQuery.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 functionsjQuery.ready();
})();
}// A fallback to window.onload, that will always workjQuery.event.add( window, "load", jQuery.ready );
}
}
onload需要全部加载完成；后面覆盖前面；
<script type="text/javascript">
window.onload = function() {
alert('HTML5学堂');
}
window.onload = function() {
alert('码匠');
}
</script>
ready只需要文档加载完成；不会发生覆盖；可以缩写；
<script type="text/javascript">
$(document).ready(function() {
alert('h5course-com');
});
$(document).ready(function() {
alert('h5course-cn');
});
// 简写
$(function() {
alert('学习HTML5，到HTML5学堂');
});
</script>
绛旓細绛旀锛jQuery涓殑$.ready涓window.onload涔嬮棿瀛樺湪鏄捐憲鍖哄埆銆備富瑕佸尯鍒湪浜庝袱鑰呯殑瑙﹀彂鏃舵満鍜岀敤閫斾笉鍚屻傝缁嗚В閲婏細瑙﹀彂鏃舵満锛1. $.ready锛氳繖鏄痡Query鎻愪緵鐨勪竴涓柟娉曪紝瀹冧細鍦℉TML鏂囨。琚畬鍏ㄥ姞杞藉拰瑙ｆ瀽瀹屾垚涔嬪悗锛屼絾鍦ㄥ叾浠栧閮ㄨ祫婧愬姞杞藉畬鎴愪箣鍓嶆墽琛屻傛崲鍙ヨ瘽璇达紝褰揇OM缁撴瀯缁樺埗瀹屾瘯锛屽氨鍙互杩愯璇ュ嚱鏁颁腑鐨勪唬鐮佷簡銆2....
绛旓細ready鏄湪椤甸潰鐨凞OM缁撴瀯鍔犺浇瀹屾瘯灏卞彂鐢燂紝鑰寃indow.onload瑕佺瓑鍒伴〉闈㈢殑鎵鏈夊厓绱狅紙鍖呮嫭鍥剧墖绛夊濯掍綋鍏冪礌锛夊姞杞藉畬姣曟墠浼氬彂鐢熴傚洜姝$ready鍙戠敓鍦╳indow.onload涔嬪墠銆
绛旓細浣犺鐨$涓鑸槸浠ｈ〃jQuery瀵硅薄銆俹nload鏄痟tml鍘熺敓浜嬩欢锛岀敤jQuery鐨鏃跺欏垯涓鑸娇鐢$(document).ready()锛屼袱鑰呯殑鍖哄埆鏈夛細1.鎵ц鏃堕棿 window.onload蹇呴』绛夊埌椤甸潰鍐呭寘鎷浘鐗囩殑鎵鏈夊厓绱犲姞杞藉畬姣曞悗鎵嶈兘鎵ц銆(document).ready()鏄疍OM缁撴瀯缁樺埗瀹屾瘯鍚庡氨鎵ц锛屼笉蹇呯瓑鍒板姞杞藉畬姣曘2.缂栧啓涓暟涓嶅悓 window.onload涓嶈兘鍚屾椂...
绛旓細涓鑸儏鍐典笅window鐨刲oad()閮芥槸鐢ㄦ潵璁剧疆body鏍囩鐨刼nload浜嬩欢.浣唎nload浜嬩欢鏄鍦ㄩ〉闈㈢殑鍏冪礌鍏ㄩ儴鍔犺浇瀹屼簡鎵嶈Е鍙戠殑,杩欎篃鍖呮嫭椤甸潰涓婄殑鍥剧墖锛屼互鍙婂ぇ鐨勮〃鏍兼暟鎹傚鏋滈〉闈笂鍥剧墖杈冨鎴栧浘鐗囧お澶,鍔犺浇闇瑕佽緝澶氭椂闂达紝灏变細瀵艰嚧椤甸潰鏃犲搷搴旓紝鎴栬呯敤鎴峰仛浜嗗叾瀹冩搷浣滀簡銆傝孞euery涓鐨剅eady()鍒欐槸鍦ㄩ〉闈㈢殑dom(鑺傜偣)鍔犺浇瀹...
绛旓細document.ready鏄痙om鏍戝噯澶囧ソ銆傚叾浠栫殑鍥剧墖鍟婏紝css鍟婏紝script鍟婁笉涓瀹氬ソ銆倃indow.onload鏄墠闈㈡墍鏈変笢瑗夸笅杞藉畬姣曘
绛旓細Jquery涓$(document).ready()鐨勪綔鐢ㄧ被浼间簬浼犵粺JavaScript涓殑window.onload鏂规硶锛屼笉杩囦笌window.onload鏂规硶杩樻槸鏈夊尯鍒殑銆1.鎵ц鏃堕棿锛歸indow.onload蹇呴』绛夊埌椤甸潰鍐呭寘鎷浘鐗囩殑鎵鏈夊厓绱犲姞杞藉畬姣曞悗鎵嶈兘鎵ц銆(document).ready()鏄疍OM缁撴瀯缁樺埗瀹屾瘯鍚庡氨鎵ц锛屼笉蹇呯瓑鍒板姞杞藉畬姣曘2.缂栧啓涓暟涓嶅悓 window.onload涓嶈兘...
绛旓細jquery鐨剅eady()瀹炵幇鐨勬槸 DOMContentLoaded 浜嬩欢锛孌OMContentLoaded涓巜indow load浜嬩欢鐨勫尯鍒 绠鍗曠殑璇磖eady()鏄湪鏂囨。鍔犺浇瀹屾垚灏变細瑙﹀彂,姝ゆ椂鍥剧墖绛夎祫婧愬彲鑳借繕娌℃湁瀹屽叏鍔犺浇,load鏄湪鎵鏈夎祫婧愰兘鍔犺浇瀹屾垚鍚庢墠浼氳Е鍙 鐪嬩笅ready鍑芥暟鐨勪唬鐮佸氨浠涔堥兘娓呮浜嗐備笅闈㈢殑浠ｇ爜鍔犱笂浜嗘敞閲婏細// Handle when the DOM is ready ...
绛旓細(window)鍜$(document)鑾峰彇鍒鐨瀵硅薄涓嶅悓銆1銆乄indow 瀵硅薄琛ㄧず涓涓祻瑙堝櫒绐楀彛鎴栦竴涓鏋躲傚湪瀹㈡埛绔 JavaScript 涓紝Window 瀵硅薄鏄叏灞瀵硅薄锛屾墍鏈夌殑琛ㄨ揪寮忛兘鍦ㄥ綋鍓嶇殑鐜涓绠.2銆丏ocument 瀵硅薄鏄 Window 瀵硅薄鐨勪竴閮ㄥ垎,姣忎釜杞藉叆娴忚鍣ㄧ殑 HTML 鏂囨。閮戒細鎴愪负 Document 瀵硅薄....
绛旓細鍦Jquery閲岄潰锛屾垜浠彲浠ョ湅鍒颁袱绉嶅啓娉:$(function(){}) 鍜$(document).ready(function(){})杩欎袱涓柟娉鐨鏁堟灉閮芥槸涓鏍风殑锛岄兘鏄湪dom鏂囨。鏍戝姞杞藉畬涔嬪悗鎵ц涓涓嚱鏁帮紙娉ㄦ剰锛岃繖閲岄潰鐨勬枃妗ｆ爲鍔犺浇瀹屼笉浠ｈ〃鍏ㄩ儴鏂囦欢鍔犺浇瀹岋級銆傝寃indow.onload鏄湪dom鏂囨。鏍戝姞杞藉畬鍜屾墍鏈夋枃浠跺姞杞藉畬涔嬪悗鎵ц涓涓嚱鏁般備篃灏辨槸璇$...
绛旓細window.onload鏄湪缃戦〉涓墍鏈夊厓绱 鍔犱笂鎵鏈夎祫婧 ++瀹屽叏鍔++杞藉埌娴忚鍣ㄥ悗鎵嶆墽琛屻傝$(document).ready()涓粦瀹鐨浜嬩欢鏄湪 dom瀹屽叏灏辩华 鏃跺氨鍙互琚皟鐢紝姝ゆ椂瀵逛簬jQuery鏉ヨ閮芥槸鍙互琚闂殑锛堝叧鑱旂殑璧勬簮鍙兘骞舵病鏈夎鍔犺浇瀹屾瘯锛夈備妇涓緥瀛愭潵璇达紝鍦$(document).ready()涓畾涔変簡鍥剧墖鐨勫楂橈紝浣嗙敱浜庢鏃...
