javascript - 异步资源加载完成后会触发什么 Javascript 事件？

Question

如果我像这样异步加载脚本

<script type="text/javascript">
    (function () {
        var js = document.createElement('script');
        js.type = 'text/javascript';
        js.async = true;
        js.src = '<%=BundleTable.ResolveUrl("~/js") %>';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(js, s);
    })();
</script>

异步内容加载完成且 dom 加载完成后会触发什么事件？

Answer 1

每个事件都有自己的通知机制，因此没有通用的答案。例如，您可以阅读有关如何检测动态加载脚本何时完成加载的信息 here和 here .如今，您可以通过使用像 YUI 或 jQuery 这样的优秀框架来节省大量时间，因为它们大多数都内置了对这些类型事件的跨浏览器支持。

对于 DOM 完成加载，没有单一的跨浏览器机制可以让您尽早完成加载。如果你看一下 $(document).ready() 的 jQuery 实现，你会看到使用了几种技术(监听“DOMContentLoaded”事件，setTimeout() 将触发的最早时间，监听窗口加载()，文档onreadystatechange 事件等...)以支持跨浏览器的此功能。

window.onload 事件将保证安全的 DOM 访问，但它也会等待所有图像完成加载，这比必要的时间晚得多。这些其他技术用于获得更早的安全访问。