问答详情
源自:1-7 jQuery中ready与load事件

jQuery中的ready和原生DOMContentLoaded事件谁先执行?原因是什么?

为什么“脚本解析二” 比 “DOMContentLoaded回调” 先输出呢?他们都是DOM树渲染完成时执行啊,这里不太明白

提问者:明瑶MY 2015-02-03 13:25

个回答

  • 冥oo冥
    2016-12-12 16:26:28

    改成这样来看:

    <script>

        window.addEventListener("load", function() {

            show('load事件回调')

        }, false);

        document.addEventListener("DOMContentLoaded", function() {

            show('DOMContentLoaded回调')

        }, false);

    </script>

    <script src="http://img.mukewang.com/down/540812440001e40e00000000.js" type="text/javascript"></script>

    <script>

        show('观察脚本加载的顺序')

        show('脚本解析一')

        //测试加载

        $(function(){

            show('脚本解析二')

        })

        show('脚本解析三')

    </script>


  • 蟹狮耗
    2016-01-14 14:43:09

    楼上说的有道理,因为jquery那个script在前,里面addEventListener DOMContentLoader事件在前,所以触发的时候先触发的ready.

  • 逍遥游_xj
    2015-04-03 16:47:13

    原因是:因为先加载的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>