Używam kilku wtyczek, niestandardowych widżetów i kilku innych bibliotek JQuery. w rezultacie mam kilka plików .js i .css. Muszę utworzyć program ładujący dla mojej witryny, ponieważ ładowanie zajmuje trochę czasu. byłoby miło, gdybym mógł wyświetlić program ładujący przed zaimportowaniem wszystkich:
<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" />
...
....
etcZnalazłem kilka samouczków, które umożliwiają mi asynchroniczne importowanie biblioteki JavaScript. na przykład mogę zrobić coś takiego:
(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);
})();z jakiegoś powodu, gdy robię to samo dla wszystkich moich plików, strony nie działają. Od tak dawna próbuję znaleźć przyczynę problemu, ale po prostu nie mogę go znaleźć. Najpierw pomyślałem, że to prawdopodobnie dlatego, że niektóre funkcje javascript zależą od innych. ale załadowałem je we właściwej kolejności, korzystając z funkcji limitu czasu, gdy jedna została zakończona, przeszedłem do następnej, a strona nadal zachowuje się dziwnie. na przykład nie mogę klikać linków itp ... animacje jednak nadal działają ..
Tak czy inaczej
Oto, o czym myślałem ... Uważam, że przeglądarki mają pamięć podręczną, dlatego ładowanie strony po raz pierwszy zajmuje dużo czasu, a następnym razem jest szybkie. więc myślę o zastąpieniu mojej strony index.html stroną, która ładuje wszystkie te pliki asynchronicznie. po zakończeniu ładowania AJAX wszystkie te pliki przekierowują do strony, której zamierzam użyć. podczas korzystania z tej strony ładowanie tej strony nie powinno zająć dużo czasu, ponieważ pliki powinny już znajdować się w pamięci podręcznej przeglądarki. na mojej stronie indeksu (strona, na której pliki .js i .css są ładowane asynchronicznie) nie obchodzą mnie błędy. Będę po prostu wyświetlać program ładujący i przekierowywać stronę po zakończeniu ...
Czy to dobra alternatywa? czy powinienem nadal próbować implementować metody asynchroniczne?
EDYTOWAĆ
sposób, w jaki ładuję wszystko asynchronicznie, wygląda następująco:
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 stateChangea najdziwniejsze jest to, że działa cały styl plus wszystkie funkcje javascript. strona jest jednak zawieszona z jakiegoś powodu ...