자바스크립트를 사용하여 스크립트를 로드하고 콜백 코드 예제를 실행하는 방법에 대한 자세한 설명

3f1c4e4b6b16bbbd69b2ee476dc4f83a 요소를 동적으로 생성한 다음 src 속성을 변경하여 스크립트를 로드할 수 있지만, 일부 함수는 스크립트가 로드된 후에 실행을 시작해야 하기 때문에 스크립트 파일이 로드되었는지 어떻게 알 수 있습니까? 그리고 효력이 발생합니다. IE 브라우저에서는 3f1c4e4b6b16bbbd69b2ee476dc4f83a 요소의 onreadystatechange를 사용하여 로딩 상태의 변화를 모니터링하고, ReadyState가 로드되었는지 또는 완료되었는지 판단하여 스크립트가 로드되었는지 여부를 판단할 수 있습니다. IE가 아닌 브라우저에서는 onload를 사용하여 스크립트가 로드되었는지 직접 확인할 수 있습니다.

간단한 구현 프로세스는 다음과 같습니다.

//IE下：
var script = document.createElement("script");
script.setAttribute("type","text/javascript");
script.onreadystatechange = function() {
  if(this.readyState == "loaded" || this.readyState == "complete"){
    alert("加载成功啦！");
  }
}
script.setAttribute("src",scripts[i]);

//Opera、FF、Chrome等：
var script = document.createElement("script");
script.setAttribute("type","text/javascript");
script.onload = function() {
  alert("加载成功啦！");
}
script.setAttribute("src",scripts[i]);

원리는 매우 간단합니다. 이 두 가지 간단한 원칙을 기반으로 직렬 로딩 및 병렬 로딩 스크립트라는 몇 가지 수정 사항을 적용합니다.

여러 JS 파일 경로가 포함된 배열이 전달되면 첫 번째 스크립트 파일 로드부터 직렬 로드 함수가 시작되고, 성공적으로 로드될 때마다 다음 스크립트 파일 로드가 시작됩니다. 모든 로드가 완료된 후 콜백 함수가 실행됩니다. 병렬 로딩은 모든 스크립트 파일을 처음부터 로드합니다. 즉, 모든 로딩이 완료되면 콜백 함수가 실행됩니다.

테스트 후 이 두 기능은 현재의 모든 주류 브라우저와 호환됩니다.

/** 
 * 串联加载指定的脚本
 * 串联加载[异步]逐个加载，每个加载完成后加载下一个
 * 全部加载完成后执行回调
 * @param array|string 指定的脚本们
 * @param function 成功后回调的函数
 * @return array 所有生成的脚本元素对象数组
 */
function seriesLoadScripts(scripts,callback) {
  if(typeof(scripts) != "object") var scripts = [scripts];
  var HEAD = document.getElementsByTagName("head").item(0) || document.documentElement;
  var s = new Array(), last = scripts.length - 1, recursiveLoad = function(i) { //递归
    s[i] = document.createElement("script");
    s[i].setAttribute("type","text/javascript");
    s[i].onload = s[i].onreadystatechange = function() { //Attach handlers for all browsers
      if(!/*@cc_on!@*/0 || this.readyState == "loaded" || this.readyState == "complete") {
        this.onload = this.onreadystatechange = null; this.parentNode.removeChild(this); 
        if(i != last) recursiveLoad(i + 1); else if(typeof(callback) == "function") callback();
      }
    }
    s[i].setAttribute("src",scripts[i]);
    HEAD.appendChild(s[i]);
  };
  recursiveLoad(0);
}
 

/**
 * 并联加载指定的脚本
 * 并联加载[同步]同时加载，不管上个是否加载完成，直接加载全部
 * 全部加载完成后执行回调
 * @param array|string 指定的脚本们
 * @param function 成功后回调的函数
 * @return array 所有生成的脚本元素对象数组
 */

function parallelLoadScripts(scripts,callback) {
  if(typeof(scripts) != "object") var scripts = [scripts];
  var HEAD = document.getElementsByTagName("head").item(0) || document.documentElement, s = new Array(), loaded = 0;
  for(var i=0; i<scripts.length; i++) {
    s[i] = document.createElement("script");
    s[i].setAttribute("type","text/javascript");
    s[i].onload = s[i].onreadystatechange = function() { //Attach handlers for all browsers
      if(!/*@cc_on!@*/0 || this.readyState == "loaded" || this.readyState == "complete") {
        loaded++;
        this.onload = this.onreadystatechange = null; this.parentNode.removeChild(this); 
        if(loaded == scripts.length && typeof(callback) == "function") callback();
      }
    };
    s[i].setAttribute("src",scripts[i]);
    HEAD.appendChild(s[i]);
  }
}

여기서 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그는 페이지의 93f0f5c25f18dab9d176bd4f6de5d30e 태그에 동적으로 삽입되며, 로드가 완료되면 태그 요소가 자동으로 제거됩니다.
조심하면 조건부 컴파일이라는 메서드가 IE 브라우저가 아닌지 여부를 확인하기 위해 여기서 표현식(!/*@cc_on!@*/0)으로 사용되는 것도 볼 수 있습니다. 관심이 있으시면 온라인에서 관련 정보를 검색하여 알아볼 수 있습니다.

이 두 함수를 사용하는 방법: 여기서는 두 개의 원격 JS 파일 주소가 포함된 배열 변수를 선언합니다(물론 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그 호출 스크립트는 도메인 간 지원).

var scripts = [ 
  "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js",
  "http://wellstyled.com/files/jquery.debug/jquery.debug.js"
];

//这两个文件分别是 jQuery 1.4.的库文件和 jQuery Debug 插件
//然后你可以使用下面的方法调用并在成功后执行回调了。

seriesLoadScripts(scripts,function(){ 

  /*
  debug = new $.debug({ 
    posTo : { x:'right', y:'bottom' },
    width: '480px',
    height: '50%',
    itempider : &#39;<hr>&#39;,
    listDOM : &#39;all&#39;
  }); 

  */
  alert(&#39;脚本加载完成啦&#39;);
});

사용된 함수 물론, 병렬로 로드하는 기능도 사용할 수 있지만, 상황에 따라 사용할 수 있습니다. 그렇지 않은 경우에는 이전 스크립트에 종속되는 것이 좋습니다. , 원칙적으로 병렬 연결이 직렬 연결보다 훨씬 빠르기 때문에 병렬 연결을 사용하십시오.

위 내용은 자바스크립트를 사용하여 스크립트를 로드하고 콜백 코드 예제를 실행하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!