Skip to content

测试并验证requirejs domReady事件的触发时间点

Notifications You must be signed in to change notification settings

JSoon/requirejs-domReady

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

requirejs-domReady

测试并验证requirejs domReady事件的触发时间点


html

<html>

<head>
    <title>requirejs domReady test</title>
</head>

<body>
    <img onload="console.log('image 1 loaded');" src="image1">
    <img onload="console.log('image 2 loaded');" src="image2">

    <script src="http://cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/require.js/2.1.18/require.min.js"></script>
    <script>
        require(['main.js'], function() {});
    </script>
</body>

</html>

main.js

define([
    'domReady'
], function (domReady) {
    $(document).ready(function () {
        console.log(document);
        var childNodes = document.body.childNodes;
        console.log('childNodes number: ' + childNodes.length);
        for (var i = 0; i < childNodes.length; i++) {
            console.log(childNodes[i] + ': ' + childNodes[i].nodeType);
        }
        console.log('jquery domReady');
    });
    domReady(function () {
        console.log('requirejs domReady');
    });
});

运行结果

qq 20160324152236

**结论:**可以看到,jquery的ready方法在DOM树构建后即触发,而requirejs的domReady方法则是在所有资源被加载完毕之后触发,相当于window.onload。

About

测试并验证requirejs domReady事件的触发时间点

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published