Sự kiện tải lên Javascript - làm cách nào để biết liệu tập lệnh đã được tải chưa?

Question

Tôi làm cách nào để sử dụng javascript để xác định xem HTMLScriptElement đã được tải hoàn toàn chưa?

Làm thế nào tôi có thể xác định xem một kịch bản tự động nạp đã tải xong mà không sử dụng onload hoặc các sự kiện thay đổi onreadystate?

Mã là như sau:

TOOL.loadScript = function (url, callback, reappend, deepSearch) { 
     var head, curr, child, tempScript, alreadyAppended, queue, 
     alreadyHandled, script, handler, loadFunc; 

     head = document.getElementsByTagName("head")[0]; 
     tempScript = document.createElement("script"); 
     tempScript.src = url; 
     alreadyAppended = false; 

     queue = []; 

     if (deepSearch) { 
     // search entire document 
     queue.push(document.firstElementChild); 
     } 
     else { 
     // just search the head element 
     queue.push(head); 
     } 

     while (queue.length !== 0) { 
     curr = queue.shift(); 

     // add child nodes to queue 
     child = curr.firstElementChild; 
     if (child !== null && child !== undefined) { 
      queue.push(child); 
      child = child.nextElementSibling; 
      while (child !== null && child !== undefined) { 
       queue.push(child); 
       child = child.nextElementSibling; 
      } 
     } 

     if (curr.tagName !== null && curr.tagName !== undefined) { 
      if (curr.tagName.toLowerCase() === "script" && curr.src === tempScript.src) { 
       script = curr; 
       alreadyAppended = true; 
       break; 
      } 
     } 
     } 

     if (!alreadyAppended) { 
     script = document.createElement("script"); 
     script.type = "text/javascript"; 
     script.async = true; 
     script.src = url; 
     } 

     alreadyHandled = false; 

     handler = function (event) { 
     console.log("handling event..."); 
     if (!alreadyHandled) { 
      if ((!event.readyState) || (event && (event.readyState === "loaded" || event.readyState === "complete"))) { 
       alreadyHandled = true; 
       callback.apply(script, [url]); 
       if (loadFunc) { 
        loadFunc.apply(script, arguments); 
       } 
      } 
     } 
     }; 

     if (script.onreadystatechange === undefined) { 
     loadFunc = script.onload; 
     script.onload = handler; 
     } 
     else { 
     loadFunc = script.onreadystatechange; 
     script.onreadystatechange = handler; 
     } 

Tôi cần giúp đỡ đây. Tôi muốn chức năng gọi lại kích hoạt ngay cả khi alreadyAppeneded === true và cùng một tập lệnh đã được tải, nhưng chỉ khi tập lệnh đó hoàn tất tải xong.

 if (!alreadyAppended || (alreadyAppended && reappend)) { 
     head.appendChild(script); 
     } 
    }; 

BOTTOM LINE: Làm thế nào để xác định xem một kịch bản đã hoàn thành tải? Vui lòng hỏi tôi nếu cần.

Cảm ơn bạn.

Answer 1

Thực hiện lười biếng: Tạo một mảng mà bạn có thể sử dụng để đẩy nguồn của tất cả các tập lệnh được tải lên và khi chúng tải, hãy đẩy chúng vào danh sách. Mỗi lần, hãy kiểm tra xem src đã cho có nằm trong mảng hay không và nếu có, hãy gọi lại ngay lập tức.

Bạn làm gì với trường hợp khi được nối, nhưng không được tải sẽ trở thành câu hỏi. Nếu bạn muốn gọi lại để kích hoạt, nhưng bạn muốn nó kích hoạt sau khi nó tải, bạn có thể làm một mảng kết hợp với một src làm khóa và phần tử kịch bản làm giá trị. Từ đó, làm cho onload hoặc onreadystatechange lửa hai lần bằng cách gói ban đầu, như vậy:

var temponload = element.onreadystatechange || element.onload; 
if (element.onreadystatechange === undefined) 
    element.onload = function(e) { temponload(); temponload(); }; 
else 
    element.onreadystatechange = function (e) { temponload(); temponload(); }; 

Bạn có mã khác mà có thể cần phải móc vào điều này, nhưng điều này sẽ giúp bạn bắt đầu hy vọng.

Answer 2

Bạn thực sự không thể biết thời điểm tập lệnh đã tải. Bạn có thể đặt một biến toàn cục trong tập lệnh mà bạn muốn kiểm tra và sau đó kiểm tra sự hiện diện của nó.

Có một dự án mới được gọi là LABjs (Tải và chặn Javascript) để tải tập lệnh động và do đó cho biết thời điểm chúng thực sự được tải (http://blog.getify.com/2009/11/labjs-new- hotness-for-script-loading/< - hãy kiểm tra)

Answer 3

Tại sao không thêm id vào phần tử tập lệnh? Kiểm tra xem id có tồn tại hay không trước khi tiếp tục ....

function includeJs(jsFilePath) { 

    if (document.getElementById(jsFilePath+"_script")) { 
    return; 
    } 
    var js = document.createElement("script"); 

    js.type = "text/javascript"; 
    js.id = jsFilePath+"_script"; 
    js.src = jsFilePath; 

    document.body.appendChild(js); 
}