मैं JQuery से कई प्लगइन्स, कस्टम विगेट्स और कुछ अन्य पुस्तकालयों का उपयोग कर रहा हूं। परिणामस्वरूप मेरे पास कई .js और .css फ़ाइलें हैं। मुझे अपनी साइट के लिए लोडर बनाने की आवश्यकता है क्योंकि लोड करने में कुछ समय लगता है। यह अच्छा होगा अगर मैं सभी आयात करने से पहले लोडर प्रदर्शित कर सकता हूं:
<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मुझे कई ट्यूटोरियल मिले हैं जो मुझे एसिंक्रोनस रूप से जावास्क्रिप्ट लाइब्रेरी आयात करने में सक्षम बनाते हैं। उदाहरण के लिए मैं कुछ ऐसा कर सकता हूं:
(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);
})();किसी कारण से जब मैं अपनी सभी फाइलों के लिए वही काम करता हूं जो पृष्ठ काम नहीं करते हैं। मैं इतने लंबे समय से कोशिश कर रहा हूं कि जहां समस्या है, उसे ढूंढने की कोशिश करूं लेकिन मैं अभी इसे नहीं ढूंढ सका हूं। पहले मैंने सोचा कि यह शायद इसलिए था क्योंकि कुछ जावास्क्रिप्ट कार्य दूसरों पर निर्भर थे। लेकिन मैंने उन्हें सही क्रम में टाइम आउट फ़ंक्शन का उपयोग करके लोड किया जब एक पूरा किया मैं अगले के साथ आगे बढ़ा और पृष्ठ अभी भी अजीब व्यवहार करता है। उदाहरण के लिए मैं लिंक आदि पर क्लिक नहीं कर पा रहा हूँ ... एनिमेशन अभी भी काम करते हैं ..
वैसे भी
यहाँ मैं क्या सोच रहा हूँ ... मेरा मानना है कि ब्राउज़रों के पास एक कैश है इसलिए पहली बार पृष्ठ लोड करने में बहुत समय लगता है और अगली बार यह जल्दी होता है। इसलिए मैं जो करने की सोच रहा हूं वह मेरे index.html पेज को एक ऐसे पेज के साथ बदल रहा है जो इस सभी फाइलों को अतुल्यकालिक रूप से लोड करता है। जब अजाक्स को उन सभी फाइलों को लोड करने के लिए किया जाता है, जो उस पृष्ठ पर पुनर्निर्देशित होती हैं, जिसका उपयोग करने की मेरी योजना है। उस पृष्ठ का उपयोग करते समय इसे लोड करने में लंबा समय नहीं लेना चाहिए क्योंकि फ़ाइलों को ब्राउज़र के कैश पर शामिल किया जाना चाहिए। मेरे अनुक्रमणिका पृष्ठ पर (पृष्ठ जहां .js और .css फ़ाइल अतुल्यकालिक रूप से लोड हो जाती है) मैं त्रुटियों को प्राप्त करने की परवाह नहीं करता। मैं बस एक लोडर प्रदर्शित कर रहा हूँ और जब किया पेज पुनः निर्देशित ...
क्या यह विचार एक अच्छा विकल्प है? या मुझे अतुल्यकालिक तरीकों को लागू करने की कोशिश करते रहना चाहिए?
संपादित करें
जिस तरह से मैं सब कुछ async लोड करता हूं वह इस तरह है:
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और अजीब बात यह है कि सभी शैली का काम प्लस सभी जावास्क्रिप्ट कार्य करता है। पृष्ठ किसी कारण के लिए जमे हुए है, हालांकि ...