많은 사람들이 JavaScript로 다른 JS 파일을로드하는 문제를 겪었을 수도 있지만 많은 친구들이로드하려는 JS 파일이로드되었는지 여부를 판단하는 방법을 모를 수도 있습니다. 부하를 완료하지 않으면 성공하지 못할 것입니다. 이 기사에서는 JS에 다른 JS 파일을로드하고로드 후 콜백 기능을 실행하는 방법을 설명합니다.
<script> 요소를 동적으로 생성 한 다음 SRC 속성을 변경하여 스크립트를로드 할 수 있지만 스크립트 파일이로드되었음을 어떻게 알 수 있습니까? 스크립트가로드되어 발효 된 후 일부 기능을 실행해야하기 때문입니다.
네트워크에서 리소스를 검색 한 후 IE 브라우저에서 <Script> 요소의 onreadyStateChange를 사용하여 로딩 상태의 변경 사항을 모니터링하고 준비 상태가로드되었는지 또는 완료되었는지 판단하여 스크립트가로드되었는지 또는 완료되는지 여부를 결정할 수 있습니다. IE 브라우저 대신 OnLoad를 사용하여 스크립트가로드되었는지 직접 결정할 수 있습니다.
간단한 구현 프로세스는 다음과 같습니다.
// IE 아래 : var script = document.createElement ( "script"); script.setAttribute ( "type", "text/javaScript"); script.onreadyStateChange = function () {if (this.readystate = "|| this.readystate =="complet ") {alert ("loaded "); }} script.setAttribute ( "src", scripts [i]); // opera, ff, chrome 등 : var script = document.createElement ( "script"); script.setAttribute ( "type", "text/javaScript"); script.onload = function () {alert ( "loaded 성공적으로! ");} script.setattribute ("src ", scripts [i]);원칙은 매우 간단합니다. 이 두 가지 간단한 원칙을 기반으로, 우리는 약간의 수정을했고,이를 일련의 로딩과 병렬 로딩 스크립트와 같은 두 가지 함수로 변경했습니다.
여러 JS 파일 경로가 포함 된 배열을 전달할 때 직렬 로딩 기능은 첫 번째 스크립트 파일로드에서 시작됩니다. 하나가 성공적으로로드 될 때마다 다음 스크립트 파일이로드됩니다. 모든 로딩이 완료되면 콜백 기능이 실행됩니다. 병렬 로딩은 처음부터 모든 스크립트 파일을로드하는 것입니다. 즉, 동일한 지점에서 시작하고 모든로드가 완료되면 콜백 기능이 실행됩니다.
테스트 후,이 두 기능은 모든 주류 브라우저와 호환됩니다.
/*** 지정된 스크립트의 연결로드* 컨 컨트레이트 로딩 [비동기] 로딩을 하나씩로드하고, 각로드가 완료되며, 각로드가 완료됩니다.* 모든로드가 완료된 후에 콜백이 실행됩니다. SeriesloadScripts (스크립트, 콜백) {if (typeof (scripts)! = "object") var scripts = [스크립트]; var head = document.getElementsByTagName ( "Head"). 항목 (0) || Document.documentElement; var s = new array (), last = scripts.length -1, recursiveload = function (i) {// recursives s [i] = document.createelement ( "스크립트"); s [i] .setattribute ( "type", "text/javaScript"); s [i] .onload = s [i] .onreadyStateChange = function () {// 모든 브라우저에 대한 처리기 첨부 if (!/*@cc_on!@*/0 || this. this.parentnode.removechild (this); if (i! = last) 재귀로드 (i + 1); else if (typeof (callback) == "function") 콜백 (); }} s [i] .setattribute ( "src", 스크립트 [i]); Head.appendChild (s [i]); }; Recursiveload (0);} /*** 지정된 스크립트를 병렬로로드* 병렬로로드 [동기 부하] 이전로드가 완료되었는지 여부에 관계없이 모든로드를 직접로드* 모든로드가 완료된 후 콜백 실행* @Param Array | string 지정된 스크립트* @Param 함수 콜백 기능* /retray 모든 스크립트 배열* /function. ParallelLoadScripts (스크립트, 콜백) {if (typeof (scripts)! = "object") var scripts = [스크립트]; var head = document.getElementsByTagName ( "Head"). 항목 (0) || document.documentElement, s = new array (), loaded = 0; for (var i = 0; i <scripts.length; i ++) {s [i] = document.createElement ( "스크립트"); s [i] .setattribute ( "type", "text/javaScript"); s [i] .onload = s [i] .leadyStateChange = function () {// 모든 브라우저에 대한 첨부 된 모든 브라우저 첨부 If (!/*@cc_on!@*/0 || this. this. this. readyed "|| this. this. readystate =="{loaded ++; this.onreadyStateChange = null; this.parentnode.removechild (this); if (loaded == scripts.length && typeof (Callback) == "function") 콜백 (); }}; s [i] .setattribute ( "src", 스크립트 [i]); Head.appendChild (s [i]); }}여기서 <cript> 태그는 페이지의 <head> 태그에 동적으로 삽입되며로드 후 태그 요소가 자동으로 제거됩니다.
주의를 기울이면 조건부 컴파일이라는 메소드가 여기에서 IE 브라우저가 아닌지 여부를 결정하기 위해 표현식 (!/*@cc_on!@*/0)으로 사용됩니다. 조건부 편집은이 기사의 초점이 아닙니다. 관심이 있으시면 학습을위한 관련 자료를 검색 할 수 있습니다.
이 두 기능을 사용하는 방법 : 여기서는 두 개의 원격 JS 파일 주소가 포함 된 배열 변수를 선언합니다 (물론 <cript> 태그 통화 스크립트는 Cross-Domain을 지원합니다).
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 디버그 플러그인 // 그런 다음 다음 방법을 사용하여 성공 후 콜백을 호출하고 실행할 수 있습니다. SeriesloadScripts (Scripts, function () { / * debug = new $ .debug ({posto : {x : 'right', y : 'bottom'}, 너비 : '480px', 높이 : '50%', 항목 디바이더 :'<hr> ', listdom :'all '})직렬로로드 된 함수는 여기에서 사용됩니다. 물론 병렬 로딩 기능을 사용할 수도 있습니다. 이것은 상황에 따라 사용할 수 있습니다. 각 다음 스크립트는 직렬로드를 사용하기 위해 이전 스크립트에 의존하는 것이 좋습니다. 원칙적으로 평행 연결이 직렬 연결보다 빠르기 때문에 병렬 연결을 사용합니다.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.