Sto usando diversi plugin, widget personalizzati e alcune altre librerie di JQuery. di conseguenza ho diversi file .js e .css. Devo creare un caricatore per il mio sito perché ci vuole un po 'di tempo per caricarsi. sarà bello se posso visualizzare il caricatore prima di importare tutti i:
<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" />
...
....
etcHo trovato diversi tutorial che mi consentono di importare una libreria JavaScript in modo asincrono. per esempio posso fare qualcosa come:
(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);
})();per qualche motivo quando faccio la stessa cosa per tutti i miei file le pagine non funzionano. Ho provato per così tanto tempo a cercare di trovare dove si trova il problema ma non riesco a trovarlo. Per prima cosa ho pensato che probabilmente fosse perché alcune funzioni javascript dipendevano dalle altre. ma li ho caricati nel giusto ordine usando la funzione time out quando uno completato ho proceduto con il successivo e la pagina si comporta ancora in modo strano. ad esempio non sono in grado di fare clic sui collegamenti ecc ... le animazioni funzionano comunque ..
In ogni modo
Ecco cosa stavo pensando ... Credo che i browser abbiano una cache, ecco perché ci vuole molto tempo per caricare la pagina per la prima volta e la prossima volta è veloce. quindi quello che sto pensando di fare è sostituire la mia pagina index.html con una pagina che carica tutti questi file in modo asincrono. quando ajax ha finito di caricare tutti quei file reindirizza alla pagina che ho intenzione di usare. quando si utilizza quella pagina, il caricamento non dovrebbe richiedere molto tempo poiché i file dovrebbero già essere inclusi nella cache del browser. nella mia pagina indice (pagina in cui i file .js e .css vengono caricati in modo asincrono) non mi interessa ricevere errori. Visualizzerò solo un caricatore e reindirizzerò la pagina al termine ...
Questa idea è una buona alternativa? o devo continuare a provare a implementare i metodi asincroni?
MODIFICARE
il modo in cui carico tutto asincrono è come:
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 stateChangee la parte strana è che tutto il lavoro dello stile più tutte le funzioni javascript. la pagina è bloccata per qualche motivo però ...