我仍在通过制作自己的加载程序来学习；这是我的进展:
<!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* 假设它的所有 alert('this is x.js returned') 在 1-5.js
类似的东西
// 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('问题已解决')}; 应该可以工作。但它并没有以某种方式附加到事件上。
如何检查我的所有 js 是否已加载？
最佳答案
看起来您检查它们是否全部加载是在加载器函数末尾运行的，因此它将在异步调用启动后立即运行。您需要将该检查部分移动到传递给 .each 函数的回调函数中。
关于javascript - 动态加载 javascript，检查所有 javascript 何时加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7017199/