2012-07-30 3 views
1
나는 다음과 같은 자바 스크립트 코드를 사용하고 있는데이 파일이 다운로드 된 후 알아 내려고 내 페이지의 헤더에 추가하고

:는 자바 스크립트를로드하고로드 된 후에 확인

function loadjscssfile(filename, filetype) 
{ 
    if (filetype=="js"){ //if filename is a external JavaScript file 
     var fileref=document.createElement('script') 
      fileref.setAttribute("type","text/javascript") 
      fileref.setAttribute("src", filename) 
    } 
    else if (filetype=="css"){ //if filename is an external CSS file 
     var fileref=document.createElement("link") 
      fileref.setAttribute("rel", "stylesheet") 
      fileref.setAttribute("type", "text/css") 
      fileref.setAttribute("href", filename) 
    } 
    if (typeof fileref!="undefined") 
     document.getElementsByTagName("head")[0].appendChild(fileref) 
} 



loadjscssfile("jquery.js","js"); 

내가 일반적으로 사용

document.getElementById("header_logo").src = "logo.png"; // load top logo 

var header_logo = document.getElementById("header_logo"); 
    header_logo.onload = function(e) { 
    // do something here, the file has loaded 
} 

을하지만 난 내 JS가로드 된 후 확인하는 방법을 작동하지 않을 수 있습니다 ..

어떤 아이디어를 내 이미지가로드되면 다음 코드는 밖으로 찾는 방법은?

(내가 jQuery를 사용할 수 없습니다.)

답변

1

당신은 onload 이벤트에 함수를 추가 할 수 있습니다

function loadjscssfile(filename, filetype, onload) { 
    //if filename is a external JavaScript file 
    if (filetype == "js") { 
     var fileref = document.createElement('script'); 
     fileref.type = "text/javascript"); 
     fileref.onload = onload; 
     fileref.src = filename); 
     document.getElementsByTagName("head")[0].appendChild(fileref); 
     return; 
    } 

    //if filename is an external CSS file 
    if (filetype == "css") { 
     var fileref = document.createElement("link"); 
     fileref.rel = "stylesheet"; 
     fileref.type = "text/css"; 
     fileref.onload = onload; 
     fileref.href = filename; 
     document.getElementsByTagName("head")[0].appendChild(fileref); 
     return; 
    } 
} 



loadjscssfile("jquery.js","js", function() { alert(this.src); }); 
+0

내가 *의의 setAttribute의 * 신경 쓰지 것, 바로 * 온로드 * 속성으로 직접 속성을 설정합니다. 그러나 많은 브라우저가 스크립트 요소 (예 : IE 8)에 대한로드 이벤트를 분리하지 않습니다. – RobG

+0

@RobG 동의, 그냥 너무 많은 OP의 코드로 엉망 싶지 않았어. –

0

는 HTML 4.01에서로드 이벤트가 onlly bodyframeset 요소에 의해 지원되었다, 그러나 많은 것은 img 요소를 지원하고 일부는 스크립트 요소를 지원합니다. HTML5에서

, script elementsbeforescriptexecute, afterscriptexecute 및 로드 스크립트 요소의 생활에 관련된 시간에 파견 이벤트가 있습니다. 그러나 이러한 이벤트에 대한 지원은 사용중인 많은 브라우저에서 사용할 수 없기 때문에 신뢰할 수 없습니다.

스크립트가로드되었는지 확인하는 가장 확실한 방법은 실행될 마지막 코드 비트 (예 : 0)에 의해 값이 할당 된 변수 값을 테스트하는 것입니다. 같은 마지막 문장 :

var loadedScripts = loadedScripts || {}; 
loadedScripts.fooScript = true; 

그런 다음 당신은 그것을 테스트 할 수 있습니다 :

if (loadedScripts.fooScript) { 
    // loaded 

} else { 
    // not loaded 
}