Je suis à l'aide de plusieurs plugins, widgets personnalisés et quelques autres bibliothèques de JQuery. résultat: j'ai plusieurs .js et .les fichiers css. J'ai besoin de créer un chargeur pour mon site, parce que ça prend un certain temps à charger. il sera bon si je peux afficher le chargeur avant de l'importer tous les:
<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
J'ai trouvé plusieurs tutos qui me permettent d'importer une bibliothèque JavaScript asynchrone. par exemple je peux faire quelque chose comme:
(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);
})();
pour une raison quelconque, quand je fais la même chose pour tous mes fichiers les pages ne fonctionne pas. J'ai essayé pendant si longtemps pour essayer de trouver où est le problème, mais j'ai juste ne peut pas le trouver. J'ai d'abord pensé que c'était probablement parce que certaines fonctions javascript dépendait des autres. mais je l'ai chargé dans le bon ordre, en utilisant le temps hors fonction lorsque l'on terminées, j'ai procédé à la prochaine et la page se comporte encore bizarre. par exemple, je ne suis pas en mesure de cliquer sur les liens etc... les animations fonctionnent toujours bien..
De toute façon
Voici ce que j'ai pensé... je crois que les navigateurs ont un cache c'est pourquoi il faut beaucoup de temps pour charger la page pour la première fois et la prochaine fois c'est rapide. donc, ce que je pense faire c'est de remplacer mon index.html page avec une page qui se charge de tous ces fichiers de manière asynchrone. lors de l'ajax est fait, le chargement de tous les fichiers rediriger vers la page que j'ai l'intention de l'utiliser. lors de l'utilisation de la page, il ne devrait pas être long à charger depuis les fichiers doivent déjà être inclus dans le cache du navigateur. sur ma page d'index (page où .js et .fichier css chargés de manière asynchrone) je ne me soucie pas d'avoir des erreurs. Je vais juste être l'affichage d'un chargeur et la redirection de la page lorsque vous avez terminé...
Cette idée est-elle une bonne alternative? ou devrais-je continuer à essayer sur la mise en œuvre de la manière asynchrone méthodes?
MODIFIER
la façon dont je le charge tout asynchrone, c'est comme:
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
et ce qui est curieux, c'est que tout le style de travail en plus de toutes les fonctions javascript. la page est gelé pour quelque raison que...
