Estoy usando varios complementos, widgets personalizados y algunas otras bibliotecas de JQuery. Como resultado, tengo varios archivos .js y .css. Necesito crear un cargador para mi sitio porque tarda un poco en cargar. Sería bueno si puedo mostrar el cargador antes de importar todo el:
<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
He encontrado varios tutoriales que me permiten importar una biblioteca de JavaScript de forma asincrónica. por ejemplo puedo hacer 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 alguna razón, cuando hago lo mismo para todos mis archivos, las páginas no funcionan. He intentado durante mucho tiempo tratar de encontrar dónde está el problema, pero simplemente no puedo encontrarlo. Primero pensé que probablemente era porque algunas funciones de JavaScript dependían de las demás. pero los cargué en el orden correcto usando la función de tiempo de espera cuando se completó, pasé al siguiente y la página todavía se comporta de manera extraña. por ejemplo, no puedo hacer clic en enlaces, etc ... aunque las animaciones todavía funcionan ...
De todos modos
Esto es lo que he estado pensando ... Creo que los navegadores tienen un caché, por eso lleva mucho tiempo cargar la página por primera vez y la próxima vez que sea rápida. así que lo que estoy pensando hacer es reemplazar mi página index.html con una página que carga todos estos archivos de forma asincrónica. cuando ajax termina de cargar todos esos archivos redirigen a la página que planeo usar. cuando use esa página, no debería demorar mucho en cargar, ya que los archivos ya deberían estar incluidos en la memoria caché del navegador. en mi página de índice (página donde se cargan los archivos .js y .css de forma asíncrona) No me importa recibir errores. Solo mostraré un cargador y redirigiré la página cuando termine ...
¿Es esta idea una buena alternativa? ¿O debería seguir intentando implementar los métodos asincrónicos?
EDITAR
la forma en que cargo todo asíncrono es 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 stateChange
Y la parte extraña es que todo el trabajo del estilo más todas las funciones de JavaScript. Sin embargo, la página está congelada por alguna razón ...