Question

我还在学习制作自己的装载机;这是我的进步：

<!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中的东西是如何工作的。在上面它会将我的js随机加载为async *，假设它在1-5.js中的所有alert('this is x.js loaded')

类似

// check goes randomly here
1.js or 1 js loaded
3.js    2 js loaded
2.js    3 js loaded
4.js    4 js loaded
// it should be here

所以逻辑是我的所有js加载if (loaded['js'].length == o["js"].length) {alert('problem solved')};应该工作的时候。但它确实以某种方式附加到事件上。

我们如何检查我的所有j是否已加载？

Answer 1

我在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>

last-loaded.js刚刚做了

window.allLoaded = true;

如果重新加载在几次尝试后没有修复问题，重新加载代码将重定向到错误页面。

这不是动态加载程序问题，但是类似的方法应该适用于动态加载程序，只要您可以识别一个点，之后所有外部代码都应该加载，并且您可以在此时运行一个非常简单的内联脚本

Answer 2

看起来你在加载器函数结束时检查它们是否全部被加载，所以它会立即运行，异步调用已经开始。您需要将该检查部分移动到传递给.each函数的回调函数。

动态加载javascript，检查加载所有javascript的时间

2 个答案: