异步加载的脚本与DOMContentLoaded或加载事件处理程序未被调用？ [英] Async-loaded scripts with DOMContentLoaded or load event handlers not being called?

问题描述

我有一个脚本，一个 DOMContentLoaded 事件处理程序 -

  document.addEventListener（'DOMContentLoaded'，function（）{
 console.log（'嗨'）; 
}）; 
  

我正在加载异步 -

 < script async src = script.js>< / script> 
  

但是，事件处理程序永远不会被调用。如果我同步加载 -

 < script src = script.js>< / script> 
  

它的工作正常。

如果我将 DOMContentLoaded 事件更改为加载事件，则不会调用。）

什么给了？应该注册事件处理程序，而不管浏览器的脚本是如何加载的，否？？？？？？

修改：它不适用于Chrome 18.0.1025.11 beta但是，在Firefox 11测试版（加载 DOMContentLoaded c>它不）。

OH伟大的JAVASCRIPT和DOM的声音，显示我的方式的错误！

解决方案

通过异步加载脚本，您可以告诉浏览器它可以独立于页面的其他部分加载该脚本。这意味着页面可能会完成加载，并且可能会在您的脚本加载之前以及在注册该事件之前触发 DOMContentLoaded 。如果发生这种情况，您将会错过该事件（注册时已经发生）。

在某些浏览器中，您可以测试文档以查看是否已经加载。我还没有检查所有的浏览器兼容性，但是在Firefox 3.6+（ MDN文档）中，您可以检查：

  if（document.readyState！==loading）
  / pre> 
 
 
查看文档是否已经加载。如果是，只是做你的事事实上，作为一个参考源代码和实现思想，jQuery与它的这样做是一回事， .ready（）方法，它看起来受到广泛的支持。调用 .ready（）时，jQuery具有此代码，首先检查文档是否已加载。如果是这样，它会立即调用就绪函数，而不是绑定事件监听器：
  //捕获$（文档）的情况。在
 //浏览器事件已经发生后调用ready（）。 
 if（document.readyState ===complete）{
 //异步处理以允许脚本延迟准备的机会
返回setTimeout（jQuery.ready，1）; 
} 
  
 
I've got a script with a DOMContentLoaded event handler—
document.addEventListener('DOMContentLoaded', function() {
    console.log('Hi');
});
Which I'm loading asynchronously—
<script async src=script.js></script>
However, the event handler is never called. If I load it synchronously—
<script src=script.js></script>
It works fine.

(Even if I change the DOMContentLoaded event to a load event, it's never called.)

What gives? The event handler should be registered irrespective of how the script is loaded by the browser, no?

Edit: It doesn't work on Chrome 18.0.1025.11 beta but, with DOMContentLoaded, it does on Firefox 11 beta (but with load it doesn't). Go figure.

OH GREAT LORDS OF JAVASCRIPT AND THE DOM, PRAY SHOW THE ERROR OF MY WAYS!
解决方案
By loading the script asynchronously, you are telling the browser that it can load that script independently of the other parts of the page.  That means that the page may finish loading and may fire DOMContentLoaded BEFORE your script is loaded and before it registers for the event.  If that happens, you will miss the event (it's already happened when you register for it).

In some browsers, you can test the document to see if it's already loaded.  I haven't checked all the browser compatibility, but in Firefox 3.6+ (MDN doc), you can check:
if (document.readyState !== "loading")
to see if the document is already loaded.  If it is, just do your business.   If it's not, then install your event listener.

In fact, as a reference source and implementation idea, jQuery does this very same thing with it's .ready() method and it looks widely supported.  jQuery has this code when .ready() is called that first checks to see if the document is already loaded.  If so, it calls the ready function immediately rather than binding the event listener:
// Catch cases where $(document).ready() is called after the
// browser event has already occurred.
if ( document.readyState === "complete" ) {
    // Handle it asynchronously to allow scripts the opportunity to delay ready
    return setTimeout( jQuery.ready, 1 );
}


                        
这篇关于异步加载的脚本与DOMContentLoaded或加载事件处理程序未被调用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！