Javascript onload事件 - 如何判断脚本是否已经加载？ [英] Javascript onload event - how to tell if script is already loaded?

问题描述

如何使用JavaScript来确定HTMLScriptElement是否已经完全加载？

How can I use javascript to determine if an HTMLScriptElement has already been fully loaded?

如何确定动态加载的脚本是否已完成加载 没有 使用onload或onreadystate更改事件？

How can I determine if a dynamically loaded script has finished loading without using the onload or onreadystate change events?

代码如下：

   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; 
      } 

我需要帮助。即使已经被添加=== true 并且已经加载了相同的脚本，但只有当该脚本完全加载时，我希望回调函数才能触发。

I need help here. I want the callback function to fire even if alreadyAppeneded === true and the same script was already loaded, but only if that script is completely finished loading.

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

BOTTOM LINE：如何确定脚本是否完成加载？如果需要，请问我问题。

BOTTOM LINE: How do I determine if a script has completed loading? Please ask me questions if needed.

谢谢。

推荐答案

为什么不在脚本元素中添加一个id？检查ID是否存在，然后继续....

Why not add an id to the script element? Check to see if the id exists before continuing....

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); 
}

这篇关于Javascript onload事件 - 如何判断脚本是否已经加载？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！