আমি জিকুয়ারি থেকে বেশ কয়েকটি প্লাগইন, কাস্টম উইজেট এবং অন্যান্য কিছু লাইব্রেরি ব্যবহার করছি। ফলস্বরূপ আমার কাছে বেশ কয়েকটি .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);
})();কোনও কারণে যখন আমি আমার সমস্ত ফাইলের জন্য একই জিনিস করি তবে পৃষ্ঠাগুলি কার্যকর হয় না। সমস্যাটি কোথায় তা খুঁজে পাওয়ার চেষ্টা করার জন্য আমি দীর্ঘদিন ধরে চেষ্টা করেছিলাম তবে কেবল এটি খুঁজে পাচ্ছি না। প্রথমে আমি ভেবেছিলাম যে সম্ভবত কিছু জাভাস্ক্রিপ্ট ফাংশন অন্যের উপর নির্ভরশীল। আমি যখন সময় শেষ করি তখন আমি পরবর্তীটির সাথে এগিয়ে যাই এবং পৃষ্ঠাটি এখনও অদ্ভুত আচরণ করে আমি সঠিক ক্রমে এগুলি লোড করেছি। উদাহরণস্বরূপ আমি লিঙ্ক ইত্যাদিতে ক্লিক করতে সক্ষম নই ... অ্যানিমেশনগুলি এখনও কাজ করে ..
যে কোন পথে
এখানে আমি যা ভাবছিলাম তা এখানে ... আমি বিশ্বাস করি ব্রাউজারগুলির একটি ক্যাশে রয়েছে যার কারণে প্রথমবারের জন্য পৃষ্ঠাটি লোড করতে অনেক সময় লাগে এবং পরের বার এটি দ্রুত হয়। সুতরাং আমি যা করার কথা ভাবছি তা হ'ল আমার ইনডেক্স html পৃষ্ঠাকে একটি পৃষ্ঠার সাথে প্রতিস্থাপন করা যা এই সমস্ত ফাইলকে অবিচ্ছিন্নভাবে লোড করে। যখন অজ্যাক্স সমস্ত ফাইল লোড করা হয়ে যায় তখন আমি যে পৃষ্ঠায় ব্যবহারের পরিকল্পনা করছি তাতে পুনঃনির্দেশ করুন। এই পৃষ্ঠাটি ব্যবহার করার সময় ফাইলগুলি লোড হতে বেশি সময় লাগবে না কারণ ব্রাউজারের ক্যাশে ফাইলগুলি অ্যারেডি করা উচিত। আমার সূচী পৃষ্ঠায় (পৃষ্ঠা যেখানে .js এবং .css ফাইল অ্যাসিক্রোনোলিউড লোড হয়ে যায়) আমি ত্রুটিগুলি পাওয়ার কোনও যত্ন করি না। আমি কেবল একটি লোডার প্রদর্শন করব এবং কাজটি করা হয়ে গেলে পৃষ্ঠাটি পুনর্নির্দেশ করব ...
এই ধারণাটি কি একটি ভাল বিকল্প? বা অ্যাসিক্রোনাস পদ্ধতিগুলি প্রয়োগ করার চেষ্টা করা উচিত আমার?
সম্পাদনা
যেভাবে আমি সমস্ত কিছু অ্যাসিঙ্ক লোড করি তা এরকম:
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এবং অদ্ভুত অংশটি হ'ল সমস্ত স্টাইলের কাজ প্লাস সমস্ত জাভাস্ক্রিপ্ট ফাংশন। পৃষ্ঠাটি কোনও কারণে নিথর হয়ে আছে যদিও ...