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" />
...
....
etcJavaScript 라이브러리를 비동기 적으로 가져올 수있는 몇 가지 자습서를 찾았습니다. 예를 들어 다음과 같이 할 수 있습니다.
(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 페이지를이 모든 파일을 비동기 적으로로드하는 페이지로 바꾸는 것입니다. ajax가 모든 파일을로드하면 내가 사용할 페이지로 리디렉션됩니다. 해당 페이지를 사용할 때 파일이 브라우저의 캐시에 포함되어야하므로로드하는 데 오래 걸리지 않아야합니다. 내 색인 페이지 (.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그리고 이상한 부분은 모든 스타일의 작업과 모든 자바 스크립트 함수입니다. 그래도 페이지가 멈췄습니다 ...