在这种情况下异步加载不起作用答案

【问题标题】：async onload not working in this case在这种情况下异步加载不起作用
【发布时间】：2019-05-27 21:13:44
【问题描述】：

我有一些代码可以在我的网站上异步加载广告，如下所示：

<div id="ad-div"></div>
<script>function onAdReady() {
    debug_log('Method onAdReady called');
    new Ad(document.getElementById("ad-div"))
}
</script>
<script src="http://content.xxxxx.com/ads/ads.min.js" async onload="onAdReady()"></script>

问题是onAdReady 函数永远不会被调用。其原因可能是包含此 sn-p 的 html 代码首先通过 javascript 加载，如下所示：

// Initiate out_window_view
$.ajax({
    url: loadPagePath("main.html"),
    success: function (result) {
        debug_log("Going in main.html view");
        $("#content").html(result);
    },
    error: function (result) {
        debug_log("Error, failed to load out_window_main view");
    }
});

此代码正在$(document).ready(function () {] 中执行，以防万一。谁能向我解释为什么这不起作用并为我提供解决此问题的解决方法或替代方法？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

我不明白您为什么需要将 async 添加到 ajax 生成的内容中。 async 脚本的目的是允许浏览器继续解析文档，而无需等待脚本完全加载。在脚本完成加载之后和 DOMReady 之前立即调用 onload 事件。换句话说，async 的onload 将不会在 DOMReady 之后触发。

当您将 sn-p 添加到页面时，页面已经完成解析，因此不会触发 async onload 事件。

IMO 的解决方案是删除 async 部分，并同步调用 <script> 之后的函数。

【讨论】：

谢谢这是一个很好的解释。我想我现在可以修复它了

【解决方案2】：

您想在页面加载时加载广告？

您在调试工具（chrome/Firefox 中的 firebug 或 F12）的网络选项卡中看到了什么？

你在哪里调用 $( document ).ready() ？

https://learn.jquery.com/using-jquery-core/document-ready/

你能告诉我你想什么时候发送 HTTP 请求吗？

【讨论】：

【解决方案3】：

如果您能够以编程方式添加脚本，默认情况下它将是async（参考here），您可以收听onload 或onreadystatechange 事件（您可以阅读here , IE11 不支持onreadystatechange)。这是一个例子：

var setup = function(){
  console.log('the script has been parsed');
};

var script = document.createElement("script");
script.src = "http://content.xxxxx.com/ads/ads.min.js";

document.getElementsByTagName("head")[0].appendChild(script);

// standard browser
script.onreadystatechange = function (){
  if (this.readyState == 'complete'){
     setup();
  }
}
// IE
script.onload = setup;

【讨论】：