javascript - 异步加载在这种情况下不起作用

Question

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

<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 函数从未被调用。原因可能是包含此代码片段的 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 () {] 中执行，以防万一。 谁能向我解释为什么这不起作用，并为我提供解决方法或替代方法来解决此问题？

Answer 1

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

当您将代码片段添加到页面时，页面已经完成解析，因此异步 onload 事件不会触发。

IMO 的解决方案是删除 async部分，只需在 <script> 之后调用该函数即可同步。