动态加载javascript，检查何时加载所有javascript_Javascript_Jquery_Asynchronous

动态加载javascript，检查何时加载所有javascript

javascript jquery asynchronous

动态加载javascript，检查何时加载所有javascript,javascript,jquery,asynchronous,Javascript,Jquery,Asynchronous,我仍然在学习制作自己的加载器；以下是我的进展： <!DOCTYPE html> <html> <head> <title>test</title> (function( $ ){ $.plugin = { loadJS: function(src, onload, onerror){ var script = document.create

我仍然在学习制作自己的加载器；以下是我的进展：

<!DOCTYPE html>
<html>
<head>
    <title>test</title>

    (function( $ ){

        $.plugin = {

            loadJS: function(src, onload, onerror){
                var script   = document.createElement("script");
                script.type  = "text/javascript";
                script.src   = src;
                script.onload = onload;
                script.onerror = onerror;
                script.onreadystatechange = function () {
                    var state = this.readyState;
                    if (state === 'loaded' || state === 'complete') {
                        script.onreadystatechange = null;
                        onload();
                    }
                };
                document.body.appendChild(script);
            },

            loader: function(o) { 
                var loaded = ({js:[],css:[]});
                // http://www.crockford.com/javascript/private.html
                var that = this;
                var phase = 0;

                $.each(o["js"], function(key,src) {
                    that.loadJS(src,
                    function(){
                        loaded['js'].push(src);
                    });
                });

                console.log(loaded['js'].length)

                // IF JS ALL LOADED, this is the main problem
                if (loaded['js'].length == o["js"].length) {
                    alert('problem solved')
                    that.loadJS(o["script"]);
                };
            }
        };
    })( jQuery );
    </script>
</head>
<body>
    <script>
    $(document).ready(function() {
        $.plugin.loader({
            js: [
                '1.js', // async
                '2.js', // async
                '3.js', // async
                '4.js'  // async
            ],
            script: '5.js', // after js loaded
            debug: 1
        });          
    });
    </script>
</body>
</html>

因此，逻辑是当我的所有js都是load

if（load['js'].length==o['js'].length）{alert（'problem solved'）应该可以工作。但它并没有以某种方式与事件联系在一起
我们如何检查我所有的js是否都加载了？
我在IE 6下遇到了问题，使用了大量JavaScript的大型应用程序，偶尔外部脚本加载被中止，而没有任何明显的网络问题，所以我最终还是这样做了
<script src="sourcefile-1.js"></script>
...
<script src="sourcefile-n.js"></script>
<script src="last-loaded.js"></script>
<body onload="if(!window.allLoaded){/*reload*/}">...</body>

如果在几次尝试后重新加载没有解决问题，重新加载代码将重定向到错误页面
这不是动态加载器的问题，但是类似的方法应该适用于动态加载器，只要您能够确定一个点，在该点之后所有外部代码都应该加载，并且您可以在该点运行一个非常简单的内联脚本。
看起来像是在加载器函数的末尾运行您的检查，以查看它们是否全部加载，因此，它将在异步调用启动后立即运行。您需要将检查部分移动到传递给.each函数的回调函数中。这只是为了让项目学习JS，还是打算将其用于生产代码？您可能想查看现有的脚本加载器。学习，但在学习其他脚本加载器以满足我们的需要后，我将在以后的生产中使用它。我知道很多事情都无法实现，例如检查同一个域等，但我确信到时我会做好的。：）啊，是的！我怎么能忘了这个。
<script src="sourcefile-1.js"></script>
...
<script src="sourcefile-n.js"></script>
<script src="last-loaded.js"></script>
<body onload="if(!window.allLoaded){/*reload*/}">...</body>

window.allLoaded = true;