Ich verwende mehrere Plugins, benutzerdefinierte Widgets und einige andere Bibliotheken von JQuery. Als Ergebnis habe ich mehrere .js- und .css-Dateien. Ich muss einen Loader für meine Site erstellen, da das Laden einige Zeit in Anspruch nimmt. Es ist schön, wenn ich den Loader anzeigen kann, bevor ich Folgendes importiere:
<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" />
...
....
etcIch habe mehrere Tutorials gefunden, mit denen ich eine JavaScript-Bibliothek asynchron importieren kann. Zum Beispiel kann ich so etwas machen wie:
(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);
})();Aus irgendeinem Grund funktionieren die Seiten nicht, wenn ich für alle meine Dateien dasselbe mache. Ich habe so lange versucht herauszufinden, wo das Problem liegt, aber ich kann es einfach nicht finden. Zuerst dachte ich, dass es wahrscheinlich daran lag, dass einige Javascript-Funktionen von den anderen abhingen. Aber ich habe sie in der richtigen Reihenfolge mit der Timeout-Funktion geladen, als eine abgeschlossen war. Ich fuhr mit der nächsten fort und die Seite verhält sich immer noch seltsam. Zum Beispiel kann ich nicht auf Links klicken usw. Animationen funktionieren trotzdem.
Sowieso
Hier ist, was ich gedacht habe ... Ich glaube, Browser haben einen Cache, deshalb dauert es lange, die Seite zum ersten Mal zu laden und das nächste Mal ist es schnell. Ich denke also daran, meine index.html-Seite durch eine Seite zu ersetzen, die alle diese Dateien asynchron lädt. Wenn Ajax fertig ist, leiten Sie alle Dateien weiter, die auf die Seite umgeleitet werden, die ich verwenden möchte. Wenn Sie diese Seite verwenden, sollte das Laden nicht lange dauern, da die Dateien bereits im Cache des Browsers enthalten sein sollten. Auf meiner Indexseite (Seite, auf der die Dateien .js und .css asynchron geladen werden) ist es mir egal, ob Fehler angezeigt werden. Ich werde nur einen Loader anzeigen und die Seite umleiten, wenn ich fertig bin ...
Ist diese Idee eine gute Alternative? oder sollte ich weiterhin versuchen, die asynchronen Methoden zu implementieren?
BEARBEITEN
Die Art und Weise, wie ich alles asynchron lade, ist wie folgt:
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 stateChangeund der seltsame Teil ist, dass die gesamte Arbeit des Stils plus alle Javascript-Funktionen. Die Seite ist jedoch aus irgendeinem Grund eingefroren ...