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

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，因为它的异步 * 假设它在 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')}; 应该管用。 但它并没有以某种方式附加到事件中。

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

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

看起来您检查它们是否都已加载正在加载程序 function 的末尾运行，因此它将立即运行异步调用已启动。 您需要将该检查部分移动到传递给每个 function 的回调 function 中。

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

问题描述

2 个解决方案

解决方案1
1 2011-08-10 20:24:11

解决方案2
1 已采纳 2011-08-10 22:14:57

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

问题描述

2 个解决方案

解决方案1 1 2011-08-10 20:24:11

解决方案2 1 已采纳 2011-08-10 22:14:57

解决方案1
1 2011-08-10 20:24:11

解决方案2
1 已采纳 2011-08-10 22:14:57