JQuery'den birkaç eklenti, özel widget ve diğer bazı kitaplıkları kullanıyorum. sonuç olarak birkaç .js ve .css dosyam var. Sitem için bir yükleyici oluşturmam gerekiyor çünkü yüklenmesi biraz zaman alıyor. Yükleyicinin tümünü içe aktarmadan önce görüntüleyebilirsem iyi olur:
<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" />
...
....
etcBir JavaScript kitaplığını eşzamansız olarak içe aktarmamı sağlayan birkaç öğretici buldum. örneğin şöyle bir şey yapabilirim:
(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);
})();bazı nedenlerden dolayı tüm dosyalarım için aynı şeyi yaptığımda sayfalar çalışmıyor. Uzun zamandır sorunun nerede olduğunu bulmaya çalışıyorum ama bulamıyorum. İlk önce bunun muhtemelen bazı javascript işlevlerinin diğerlerine bağlı olmasından kaynaklandığını düşündüm. ancak zaman aşımı işlevini kullanarak onları doğru sırada yükledim, bir sonrakine geçtim ve sayfa hala garip davranıyor. örneğin bağlantılara tıklayamıyorum vs ... animasyonlar yine de çalışıyor ..
Neyse
İşte düşündüğüm şey şu ... Tarayıcıların bir önbelleği olduğuna inanıyorum, bu yüzden sayfanın ilk kez yüklenmesi uzun zaman alıyor ve bir dahaki sefere hızlı. bu yüzden yapmayı düşündüğüm şey, index.html sayfamı, tüm bu dosyaları eşzamansız olarak yükleyen bir sayfayla değiştirmek. ajax tüm bu dosyaları yüklemeyi bitirdiğinde kullanmayı planladığım sayfaya yönlendiriyor. Bu sayfayı kullanırken, dosyaların tarayıcının önbelleğine dahil edilmesi gerektiğinden yüklenmesi uzun sürmemelidir. indeks sayfamda (.js ve .css dosyasının eşzamansız olarak yüklendiği sayfa) Hata alma umurumda değil. Sadece bir yükleyici görüntüleyeceğim ve bittiğinde sayfayı yeniden yönlendireceğim ...
Bu fikir iyi bir alternatif mi? yoksa eşzamansız yöntemleri uygulamaya devam etmeli miyim?
DÜZENLE
her şeyi eşzamansız yükleme şeklim şuna benzer:
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 stateChangeve işin tuhaf yanı, stilin tüm çalışması artı tüm javascript işlevleri. sayfa bazı nedenlerden dolayı donmuş olsa da ...