动态加载 javascript，检查何时加载所有 javascript
[英]loading javascript dynamically, check when all javascript is loaded
问题描述
I'm still learning by making my own loader;
我仍在通过制作自己的装载机来学习； here's my progress:这是我的进展：
<!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>
the problem is i still dont get how stuff work in js.问题是我仍然不明白js是如何工作的。 above the same it will load my js randomly as its async* assuming its all alert('this is x.js loaded') inside the 1-5.js同样，它会随机加载我的 js，因为它的异步 * 假设它在 1-5.js 内的所有alert('this is x.js loaded')
something like就像是
// 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
so the logic is when my all js is load if (loaded['js'].length == o["js"].length) {alert('problem solved')};所以逻辑是当我的所有js都加载if (loaded['js'].length == o["js"].length) {alert('problem solved')}; should work.应该管用。 but it doent attach to the event somehow.但它并没有以某种方式附加到事件中。
How can we check if all my js is loaded?我们如何检查我的所有 js 是否已加载？
2 个解决方案
解决方案1
1 2011-08-10 20:24:11
I ran into problems under IE 6 with a large JavaScript heavy app where occasionally external script loading was aborted without any discernable network trouble, so I ended up doing我在 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>
where last-loaded.js just did last-loaded.js刚刚在哪里
window.allLoaded = true;
and where the reload code would redirect to an error page if a reload hadn't fixed the problem after a few tries.如果在几次尝试后重新加载没有解决问题，重新加载代码将重定向到错误页面。
This isn't the dynamic loader problem, but a similar approach should work with a dynamic loader as long as you can identify a point after which all external code should have loaded and you can run a very simple inlined script at that point.这不是动态加载器问题，但只要您能确定一个点，在该点之后应该加载所有外部代码，并且您可以在该点运行一个非常简单的内联脚本，类似的方法就应该适用于动态加载器。
解决方案2
1 已采纳 2011-08-10 22:14:57
Looks like your check to see if they are all loaded is being run at the end of the loader function, so it will run immediately the async calls have been started.看起来您检查它们是否都已加载正在加载程序 function 的末尾运行，因此它将立即运行异步调用已启动。 You need to move that check part into the the callback function thats passed to the.each function.您需要将该检查部分移动到传递给每个 function 的回调 function 中。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.