Tôi đang sử dụng một số plugin, widget tùy chỉnh và một số thư viện khác từ JQuery. kết quả là tôi có một số tệp .js và .css. Tôi cần tạo trình tải cho trang web của mình vì cần một thời gian để tải. sẽ rất tuyệt nếu tôi có thể hiển thị trình nạp trước khi nhập tất cả:
<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" />
...
....
etcTôi đã tìm thấy một số hướng dẫn cho phép tôi nhập thư viện JavaScript không đồng bộ. Ví dụ, tôi có thể làm điều gì đó như:
(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);
})();vì một số lý do khi tôi làm điều tương tự cho tất cả các tệp của mình, các trang không hoạt động. Tôi đã cố gắng rất lâu để cố gắng tìm ra vấn đề ở đâu nhưng tôi không thể tìm ra nó. Đầu tiên tôi nghĩ rằng có thể là do một số hàm javascript phụ thuộc vào các hàm khác. nhưng tôi đã tải chúng theo đúng thứ tự bằng cách sử dụng chức năng hết thời gian khi một trang hoàn thành, tôi tiếp tục với trang tiếp theo và trang vẫn hoạt động kỳ lạ. ví dụ: tôi không thể nhấp vào các liên kết, v.v ... hoạt ảnh vẫn hoạt động mặc dù ..
Dù sao
Đây là những gì tôi đã suy nghĩ ... Tôi tin rằng các trình duyệt có bộ nhớ cache, đó là lý do tại sao phải mất nhiều thời gian để tải trang lần đầu tiên và những lần tiếp theo thì rất nhanh. vì vậy những gì tôi đang nghĩ đến là thay thế trang index.html của tôi bằng một trang tải tất cả các tệp này một cách không đồng bộ. khi ajax tải xong tất cả các tệp đó sẽ chuyển hướng đến trang mà tôi định sử dụng. khi sử dụng trang đó, sẽ không mất nhiều thời gian để tải vì các tệp sẽ được đưa vào bộ nhớ đệm của trình duyệt. trên trang chỉ mục của tôi (trang mà tệp .js và .css được tải không đồng bộ) Tôi không lo gặp lỗi. Tôi sẽ chỉ hiển thị trình tải và chuyển hướng trang khi hoàn tất ...
Ý tưởng này có phải là một sự thay thế tốt? hay tôi nên tiếp tục cố gắng triển khai các phương thức không đồng bộ?
BIÊN TẬP
cách tôi tải mọi thứ không đồng bộ giống như:
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 stateChangevà phần kỳ lạ là tất cả công việc của phong cách cộng với tất cả các hàm javascript. trang bị đóng băng vì một số lý do ...