Estou usando vários plugins, widgets personalizados e algumas outras bibliotecas do JQuery. Como resultado, tenho vários arquivos .js e .css. Preciso criar um carregador para o meu site, pois leva algum tempo para carregar. será bom se eu puder exibir o carregador antes de importar todos os:
<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" />
...
....
etcEncontrei vários tutoriais que me permitem importar uma biblioteca JavaScript de forma assíncrona. por exemplo, eu posso fazer algo como:
(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);
})();por algum motivo, quando faço a mesma coisa em todos os meus arquivos, as páginas não funcionam. Eu venho tentando há tanto tempo tentar descobrir onde está o problema, mas simplesmente não consigo encontrá-lo. Primeiro, pensei que era provavelmente porque algumas funções javascript dependiam das outras. mas eu os carreguei na ordem correta, usando a função de tempo limite, quando uma foi concluída, continuei com a próxima e a página ainda se comporta de forma estranha. por exemplo, não consigo clicar nos links etc ... as animações ainda funcionam ..
Enfim
Aqui está o que eu tenho pensado ... Acredito que os navegadores tenham um cache, por isso leva muito tempo para carregar a página pela primeira vez e na próxima vez que é rápido. então o que estou pensando em fazer é substituir minha página index.html por uma página que carregue todos esses arquivos de forma assíncrona. quando o ajax terminar de carregar todos os arquivos redirecionados para a página que pretendo usar. ao usar essa página, não deve demorar muito para carregar, pois os arquivos já devem ser incluídos no cache do navegador. na minha página de índice (página em que os arquivos .js e .css são carregados de forma assíncrona), não me importo de obter erros. Vou apenas exibir um carregador e redirecionar a página quando terminar ...
Essa ideia é uma boa alternativa? ou devo continuar tentando implementar os métodos assíncronos?
EDITAR
do jeito que eu carrego tudo assíncrono é como:
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 a parte estranha é que todo o trabalho do estilo, além de todas as funções javascript. a página está congelada por algum motivo ...