2011-09-08 2 views
1

나는 사용자가 자신의 맞춤 그래픽과 레이아웃 (CSS 파일)을 선택할 수 있도록 스타일 시트 변환기가있는 꽤 많은 페이지의 웹 사이트를 가지고 있습니다.외부 스크립팅을 수행하는 방법은 무엇입니까?

이 css 파일은 호출시에만 그래픽에로드됩니다 그래픽이 인스턴트 스위치로로드되었을 때 페이지가 이미 몇 초 또는 몇 분 동안 열렸더라도 클릭했습니다. 페이지를 열고 스타일을 클릭 할 수있는 오래 걸리는으로 통지하는 동일한 시간입니다 -

function MM_preloadImages() { //v3.0 
    var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); 
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) 
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} 
} 

</SCRIPT> 


<body onLoad="MM_preloadImages('/corporate/heading.png','/creative/heading.png','/earth/heading.png','/under-the-sea/heading.png','/space-and-stars/heading.png','/classical/heading.png','/corporate/document.jpg','/space-and-stars/document.png','/creative/document.jpg','/earth/background.jpg','/under-the-sea/background.jpg','/classical/document.png','/classical/background.jpg','/under-the-sea/document.png','/corporate/home-graphics.png','/earth/content.jpg','/earth/footer.jpg','/earth/home-graphics.png','/under-the-sea/home-graphics.png','/creative/home-graphics.png','/space-and-stars/background.jpg','');"> 

그것이 환상적으로 작동합니다

그래서 나는 다음과 같은 코드를 구현 스타일을 캐싱 한 스타일을 즉시 그리고 쉽게 전환 할 수 있습니다.

그러나 사이트가 늘어나고 이제 각 html 파일에 위의 페이지가 꽤 많이 있습니다. 필자는 방금 "크리에이티브 2"스타일을 추가했는데, 이는 위의 사항을 업데이트해야하는 원인이되었습니다.이 코드의 유지 관리는 각 페이지를 편집하는 것이 비효율적입니다.

누군가는 지적 또는 얼마나 저를 보여줄 수있을 것으로, 원칙적 :

<body onLoad="MM_preloadImages('/styles-code.js);"> 



styles-code.js?? page: 

'/corporate/heading.png', 
'/creative/heading.png', 
'/earth/heading.png', 
'/sea/heading.png', 
'/classical/heading.png', 

'/corporate/background.jpg', 
'/creative/background.jpg', 
'/earth/background.jpg', 
'/sea/background.jpg', 
'/classical/background.jpg', 

etc 

모두 볼 수있는 쉬운 페이지와 편집 목록에 의해 불리는이 코드의 한 페이지가?

정말

답변

1

당신은 정확히 페이지에서 항목을로드하는 방법에 페이지 이름을 전달할 수 없습니다이 함께지도를 부탁드립니다. 그러나 당신은 이렇게 할 수 있습니다.

<body onLoad="LoadStyles('/styles-code.js');"> 
<script> 

LoadStyles = function(pageName){ 
    var head= document.getElementsByTagName('head')[0]; // get head element 
    var script= document.createElement('script'); // create new script element 
    script.type= 'text/javascript'; // set type 
    script.onreadystatechange= function() { 
     if (this.readyState == 'complete') 
      MM_preloadImages(imgArray) ; // call when script is loaded 
    } 

    script.src= pageName; // set script source path 
    head.appendChild(script); // append to body 

} 

</script> 

당신의 스타일 code.js는 다음과 같은 데이터가 포함됩니다 :

imgArray = [ 
'/corporate/background.jpg', 
'/creative/background.jpg', 
'/earth/background.jpg', 
.... 
'otherresourcenames.jpg']; 
+0

덕분에 나는 그것으로 위하지만, 찾을 수없는 성공을 시도하고 있지만 그것으로보고합니다. 자바 스크립트를 모르므로 뭔가 간단 할 수 있습니다. 필자는 그대로 코드를 붙여 넣기 만하면됩니다. 아마도 일부는 다른 사람들에게 상식 일 수있는 커스터마이즈가 필요합니까? 그러나 그것이 작동하지 않으면, 나는 그 이유를 이해하기 시작하는 방법을 모른다. 제발 조언 해 줘? 그것이 작동하지 않는 이유를 볼 수 있다면 , 나는에 이것을 시도하고있어 페이지는 다음과 같습니다 http://www.delightwebdesign.co.uk/ 자바 스크립트 페이지를에 : 에 http : // WWW. delightwebdesign.co.uk/js/styles-code.js 감사합니다. –

+0

가능한 경우 그래픽 캐시가 변경되었을 때 그래픽 다운로드를 작동하지 않을 때 그래픽 캐시가 이미 미리로드되어있는 상태에서 (브라우저 캐시를 지우고) 스타일을 변경하면 (페이지 왼쪽 상단에서) 작업하지 않는 것을 볼 수 있습니다. –

+0

고쳐 : VAR의 imgArray = '/corporate/background.jpg' '/creative/background.jpg' '/earth/background.jpg' 'otherresourcenames.jpg' ]; MM_preloadImages.apply (this, imgArray); https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/function/apply –

관련 문제