jQuery中的ready和原生DOMContentLoaded事件谁先执行？原因是什么？
为什么“脚本解析二” 比 “DOMContentLoaded回调” 先输出呢？他们都是DOM树渲染完成时执行啊，这里不太明白
明瑶MY
2015-02-03
7 回答
改成这样来看：
<script>
window.addEventListener("load", function() {
show('load事件回调')
}, false);
document.addEventListener("DOMContentLoaded", function() {
show('DOMContentLoaded回调')
}, false);
</script>
<script src="http://img1.sycdn.imooc.com//down/540812440001e40e00000000.js" type="text/javascript"></script>
<script>
show('观察脚本加载的顺序')
show('脚本解析一')
//测试加载
$(function(){
show('脚本解析二')
})
show('脚本解析三')
</script>
原因是：因为先加载的JQuery后调用的document.addEventListener添加DOMContentLoaded。
注意jQuery.ready.promise里面的completed如下其实就是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>
举报
0/150
提交
取消
