Я використовую кілька плагінів, спеціальні віджети та деякі інші бібліотеки від JQuery. в результаті у мене є кілька файлів .js та .css. Мені потрібно створити завантажувач для свого сайту, оскільки це потребує певного часу для завантаження. буде добре, якщо я можу показати завантажувач перед імпортом усіх:
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/myFunctions.js"></script>
<link type="text/css" href="css/main.css" rel="stylesheet" />
...
....
etcЯ знайшов кілька підручників, які дозволяють мені імпортувати бібліотеку JavaScript асинхронно. наприклад, я можу зробити щось на кшталт:
(function () {
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = 'js/jquery-ui-1.8.16.custom.min.js';
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
})();чомусь, коли я роблю те саме, що для всіх моїх файлів сторінки не працюють. Я так довго намагався знайти проблему, але я просто не можу її знайти. Спочатку я подумав, що це, мабуть, тому, що деякі функції javascript залежать від інших. але я завантажив їх у правильному порядку, використовуючи функцію тайм-ауту, коли одна завершена, я перейшов до наступного, і сторінка все ще веде себе дивно. наприклад, я не в змозі натискати на посилання тощо ... анімація все ще працює ..
Все одно
Ось що я думав ... Я вважаю, що у веб-переглядачів є кеш-пам'ять, тому завантаження сторінки потребує тривалого часу, а наступного разу - швидкого. тож я маю намір замінити свою сторінку index.html на сторінку, яка завантажує всі ці файли асинхронно. коли Ajax виконує завантаження всіх цих файлів, переадресацію на сторінку, яку я планую використовувати. при використанні цієї сторінки завантаження не повинно зайняти багато часу, оскільки файли повинні бути включені в кеш браузера. на моїй сторінці індексу (сторінка, де .js та .css файл завантажуються асинхронно) Мені не важливо помилок. Я просто показуватиму завантажувач і перенаправлятиму сторінку, коли закінчите ...
Чи є ця ідея гарною альтернативою? чи слід намагатись реалізувати асинхронно методи?
EDIT
як я завантажую все async, як:
importScripts();
function importScripts()
{
//import: jquery-ui-1.8.16.custom.min.js
getContent("js/jquery-1.6.2.min.js",function (code) {
var s = document.createElement('script');
s.type = 'text/javascript';
//s.async = true;
s.innerHTML=code;
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
setTimeout(insertNext1,1);
});
//import: jquery-ui-1.8.16.custom.min.js
function insertNext1()
{
getContent("js/jquery-ui-1.8.16.custom.min.js",function (code) {
var s = document.createElement('script');
s.type = 'text/javascript';
s.innerHTML=code;
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
setTimeout(insertNext2,1);
});
}
//import: jquery-ui-1.8.16.custom.css
function insertNext2()
{
getContent("css/custom-theme/jquery-ui-1.8.16.custom.css",function (code) {
var s = document.createElement('link');
s.type = 'text/css';
s.rel ="stylesheet";
s.innerHTML=code;
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
setTimeout(insertNext3,1);
});
}
//import: main.css
function insertNext3()
{
getContent("css/main.css",function (code) {
var s = document.createElement('link');
s.type = 'text/css';
s.rel ="stylesheet";
s.innerHTML=code;
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
setTimeout(insertNext4,1);
});
}
//import: jquery.imgpreload.min.js
function insertNext4()
{
getContent("js/farinspace/jquery.imgpreload.min.js",function (code) {
var s = document.createElement('script');
s.type = 'text/javascript';
s.innerHTML=code;
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
setTimeout(insertNext5,1);
});
}
//import: marquee.js
function insertNext5()
{
getContent("js/marquee.js",function (code) {
var s = document.createElement('script');
s.type = 'text/javascript';
s.innerHTML=code;
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
setTimeout(insertNext6,1);
});
}
//import: marquee.css
function insertNext6()
{
getContent("css/marquee.css",function (code) {
var s = document.createElement('link');
s.type = 'text/css';
s.rel ="stylesheet";
s.innerHTML=code;
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
setTimeout(insertNext,1);
});
}
function insertNext()
{
setTimeout(pageReadyMan,10);
}
}
// get the content of url and pass that content to specified function
function getContent( url, callBackFunction )
{
// attempt to create the XMLHttpRequest and make the request
try
{
var asyncRequest; // variable to hold XMLHttpRequest object
asyncRequest = new XMLHttpRequest(); // create request object
// register event handler
asyncRequest.onreadystatechange = function(){
stateChange(asyncRequest, callBackFunction);
}
asyncRequest.open( 'GET', url, true ); // prepare the request
asyncRequest.send( null ); // send the request
} // end try
catch ( exception )
{
alert( 'Request failed.' );
} // end catch
} // end function getContent
// call function whith content when ready
function stateChange(asyncRequest, callBackFunction)
{
if ( asyncRequest.readyState == 4 && asyncRequest.status == 200 )
{
callBackFunction(asyncRequest.responseText);
} // end if
} // end function stateChangeі дивна частина полягає в тому, що вся робота стилю плюс усі функції javascript. сторінка чомусь заморожена ...