如何判断脚本是否已加载？

Question

我有一个函数，在某个时候document.getElementsbytagname（“ script”），并且想知道每个脚本是否已加载。

我想获得一个承诺，如果它已经加载并待定，则可以实现，因此我可以使用。 。

我想我想一个负载事件，但是如果脚本已经加载，我将永远不会得到该事件。

我可以通过做出一些假设来解决这个问题，即我控制所有动态脚本标签，对于静态脚本标签，文档currentscript始终是迄今为止加载的最后一个脚本，并且所有上述脚本都在加载，假设他们是他们的加载。都是静态的。但是这些假设可能并不总是正确的。

因此，是否有一种方法可以检查状态并产生承诺，即取决于状态将以实现（已解决）开始或通过负载事件发射来实现？

Answer 1

将脚本元素添加到DOM上会导致它们异步加载，而不是及时及时使用即可使用它们的代码。您需要为脚本的onload事件使用回调函数。这是这样做的示例助手函数。

function loadAsync(url, callback) {
  var s = document.createElement('script');
  s.setAttribute('src', url);
  s.onload = callback;
  document.head.insertBefore(s, document.head.firstElementChild);
}

Answer 2

mutationObserver可用于将加载事件侦听器添加到动态创建的脚本元素中。

地图用于存储加载事件发射时将解决的承诺。

const scriptMap = new Map();

const observer = new MutationObserver(mutations => {
  for (const mutation of mutations) {
    for (const node of mutation.addedNodes) {
      if (node.nodeName === 'SCRIPT' && node.getAttribute('src') != null) {
        scriptMap.set(node, new Promise(resolve => {
          node.addEventListener('load', () => resolve());  
        }));
      }
    }    
  }  
});

开始观察：

observer.observe(document, {
  childList: true,
  subtree: true
});

定义一个返回承诺的函数，如果脚本尚未加载或解决否则，该函数将待定：

const load = script => scriptMap.get(script) ?? Promise.resolve();

示例用法：

const scriptElements = document.getElementsByTagName('script');

for (let script of scriptElements) {
  await load(script);
}

使用scriptmmap.values（）以获取动态创建脚本的承诺：

await Promise.all(scriptMap.values());

为了效率，请停止观察何时不再需要：

observer.disconnect();