jQuery中的ready和原生DOMContentLoaded事件誰(shuí)先執(zhí)行？原因是什么？
為什么“腳本解析二” 比 “DOMContentLoaded回調(diào)” 先輸出呢？他們都是DOM樹(shù)渲染完成時(shí)執(zhí)行啊，這里不太明白
明瑤MY
2015-02-03
3 回答
舉報(bào)
0/150
提交
取消
2016-12-12
改成這樣來(lái)看：
<script>
? ? window.addEventListener("load", function() {
? ? ? ? show('load事件回調(diào)')
? ? }, false);
? ? document.addEventListener("DOMContentLoaded", function() {
? ? ? ? show('DOMContentLoaded回調(diào)')
? ? }, false);
</script>
<script src="http://img1.sycdn.imooc.com//down/540812440001e40e00000000.js" type="text/javascript"></script>
<script>
? ? show('觀察腳本加載的順序')
? ? show('腳本解析一')
? ? //測(cè)試加載
? ? $(function(){
? ? ? ? show('腳本解析二')
? ? })
? ? show('腳本解析三')
</script>
2016-01-14
樓上說(shuō)的有道理，因?yàn)閖query那個(gè)script在前，里面addEventListener DOMContentLoader事件在前，所以觸發(fā)的時(shí)候先觸發(fā)的ready.
2015-04-03
原因是：因?yàn)橄燃虞d的JQuery后調(diào)用的document.addEventListener添加DOMContentLoaded。
注意jQuery.ready.promise里面的completed如下其實(shí)就是jQuery.ready()。
function completed() {
document.removeEventListener( "DOMContentLoaded", completed, false );
window.removeEventListener( "load", completed, false );
jQuery.ready();
}
你可以換下位置再試試比如：
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
console.log("DOMContentLoaded");
}, false);
</script>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function() {console.log("jquery.ready");});
</script>