JQuery가로드되기 전에 Jquery 'ready()'가 지연됩니다.

Question

Jquery를 비롯하여 많은 플러그인이 포함 된 두 개의 JS 파일을로드 중입니다. 'ready()'JQuery 함수는 두 번째 파일에있다.

코드 :

function downloadJSAtOnload() { 

     var element = document.createElement("script"); 
     element.src ='<%= deferJsAll %>'; 
     document.body.appendChild(element); 

     // second JS file load with isReady goes here 
    } 

    // Check for browser support of event handling capability 
    if (window.addEventListener) 
     window.addEventListener("load", downloadJSAtOnload, false); 
    else if (window.attachEvent) 
     window.attachEvent("onload", downloadJSAtOnload); 
    else window.onload = downloadJSAtOnload; 

나는 또한 두 번째 파일을로드 할 때 (코드 내 주석 참조) 볼 수 있습니다.

문제는 내가 실행 순서를 제어 할 수 없기 때문에 JQuery가로드되기 전에 'ready()'가 실행되고 오류가 발생합니다. 지연로드를 사용하고 Jquery 파일이 먼저로드 된 다음 두 번째 파일 (ready() 함수가있는 파일)이 실행되는지 확인하는 옵션이 있습니까?

"< % = deferJsAll %>"나는 CDN, gzip 또는 일반 텍스트 JS 파일에서 어떤 파일을 제공할지 결정하기 때문에 사용하고 있습니다.

진행 : 그냥 퍼팅에 대해 생각 :

var elementApp = document.createElement("script"); 
elementApp.src = 'js/app.js'; 
document.body.appendChild(elementApp); 

을 첫 번째 문서의 끝에서. 따라서 첫 번째 문서의로드가 완료되면 두 번째 종속 JS 코드가 문서 본문에 포함됩니다. 좋은 생각이라고 생각하세요?

Answer 1

다음은 페이지의 일부 var이 존재할 때까지 기다릴 필요가있는 솔루션입니다. 이름 (예 : jQuery 또는 임의의 깊이가있는 twttr.widgets 네임 스페이스) 및 기타 자체 설명 속성이 필요합니다. 페이스 북과 트위터 위젯이로드 될 때까지 기다릴 필요가있을 때 생산되는 http://www.vitalmtb.com/에서 작동합니다.

// Wait till JS object is loaded. It can be a chanined variable name. 
window.whenAvailable = function (name, callback, interval, max_wait) { 
    interval || (interval = 50); // ms 
    max_wait || (max_wait = 5000); // ms 
    var timer, 
     findVarByName = function(name) { 
     var index = 0, 
      parts = name.split('.'), 
      result = window; 

     index = 0; 
     try { 
      while (typeof result !== "undefined" && result !== null && index < parts.length) { 
       result = result[parts[index++]]; 
      } 
     } 
     catch (e) {} 
     if (index < parts.length || (typeof result == 'undefined' && result === undefined)) return false; 
     else return true; 
    }; 

    timer = window.setTimeout(function() { 
     if (findVarByName(name)) { 
      return callback(); 
     } else { 
      window.setTimeout(arguments.callee, interval); 
     } 
    }, interval); 

    window.setTimeout(function() { 
     clearTimeout(timer); 
    }, max_wait); 
} 

사용 :

whenAvailable('FB', $j.spotlights.a.show_social_buttons); 
whenAvailable('twttr.widgets', $j.spotlights.b.show_social_buttons); 

Answer 2

onloadystatechange (IE 용) & onload를 사용하여 스크립트로드가 완료된 것을 감지 할 수 있습니다.

function loadScript(callback){ 
    var script = document.createElement('script'); 
    script.type = 'text/javascript'; 
    script.src = '<%= deferJsAll %>'; 
    document.body.appendChild(script); 

    // exit on jQuery load. 
    script.onload = function(){ callback(); }; 
    script.onreadystatechange = function() { 
    if (this.readyState == 'complete') callback(); 
    } 
} 


loadScript(function(){ 
    $.getScript('<% jquery-dependent.js %>', function(){ 
    // jquery-dependent.js is loaded 
    } 
});