Привет всем!
Уже который день ломаю голову над следующей задачей.
jsLoad = {
js : function(file,callback) {
(function(){
var
call = arguments.callee;
if(file.length!=0){
var element = file.shift(),
script = document.createElement("script");
script.src = element;
script.async = true;
script.onload = script.onreadystatechange = function(){
script.onreadystatechange = script.onload = null;
call();
}
var head = document.getElementsByTagName("body")[0];
(head || document.body).appendChild(script);
}else{
callback();
}
})();
}
};
jsLoad.js({
file: ['test2.js','http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'],
callback:
[
function() {
alert('All first callback loaded :)');
}
]
});
jsLoad.js({
file: ['test1.js','test3.js','test4.js'],
callback:
[
function() {
alert('All second callback loaded :)');
}
]
});
Этот код должен
ПОСЛЕДОВАТЕЛЬНО (как раз то, чего он почему то не делает!), обрабатывать каждый массив объектов и динамически подключать файлы из него.
На действие onload каждого файла, вешается событие, которое повторно запускает функцию обработки массива для подключения следующих файлов.
Если файлов в массиве больше нет, то вызывается callback.
Запустим этот скрипт, получаем:
<body>
<script src="loadScripts.js" type="text/javascript">
<script src="test2.js">
<script src="test1.js">
<script src="test3.js">
<script src="test4.js">
</body>
Видим, что файлы подключились не последовательно, как должны были, а как попало! Некоторые, например 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js', вообще не подключились!
Кроме того, выполнился всего один callback - alert('All second callback loaded
');
А теперь что меня больше всего удивило в этом!!!
Немного изменим код, добавим alert:
// ....................................
js : function(file,callback) {
(function(){ alert('Это мы добавили ALERT!');
var
call = arguments.callee;
if(file.length!=0){
var element = file.shift(),
script = document.createElement("script");
script.src = element;
// .............................................................
Запускаем!
Что мы видим:
<body>
<script src="loadScripts.js" type="text/javascript">
<script src="test2.js">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
<script src="test1.js">
<script src="test3.js">
<script src="test4.js">
</body>
Все запустилось отлично и все callback выполнились!
А теперь вопрос знатокам!
Почему так произошло и alert сыграл такую существенную роль?
Может необходима задержка перед подключением скриптов?
Или другие варианты?
