Я все еще учусь, делая свой собственный загрузчик; вот мой прогресс:
<!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 случайным образом как асинхронный *, предполагая, что все alert('this is x.js loaded') внутри 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('problem solved')}; должно работать. но это как-то связано с событием.
Как мы можем проверить, загружены ли все мои js?