异步加载所有 technorati 脚本广告标签答案

【问题标题】：Load all technorati script ads tags asynchronously异步加载所有 technorati 脚本广告标签
【发布时间】：2015-08-25 07:40:13
【问题描述】：

有什么问题？ 我的网页上的广告加载缓慢存在问题，我使用的 Technorati 广告标签会阻止页面呈现，直到广告标签一一加载，

示例： 如果我在页面中间有一个广告代码，在该广告代码完全加载之前，我看不到页面的页脚。

我需要什么？ 我想要一种方法来使页面加载更快，并在整个页面完全加载（异步）后保留这些脚本，我尝试了多种方法，但都没有奏效。

这是我必须使用的广告代码：

<script type="text/javascript">
   document.write('<scri' + 'pt type="text/javascript" src="'
   + (document.location.protocol == 'https:' ? 'https://uat-secure' : 'http://ad-cdn')
   + '.technoratimedia.com/00/81/95/uat_19581.js?ad_size=300x250"></scri' + 'pt>');
</script>

这是我使用广告标签的页面的链接： http://feat.youmobile.org/

【问题讨论】：

你不能直接放置脚本标签而不是像那样“构建”它吗？
@RemyGrandin 不，我必须使用 technorati 提供的这段代码......它会生成一个包含广告客户内容的 iframe
这在功能上是等价的...您是否尝试将 document.write 封装在加载 $(function(){}); 的 jquery 中?

标签： javascript jquery html performance

【解决方案1】：

尝试在生成的script 标记中使用defer 或async，具体取决于您的预期行为：

<script type="text/javascript">
   document.write('<scri' + 'pt type="text/javascript" defer src="'
   + (document.location.protocol == 'https:' ? 'https://uat-secure' : 'http://ad-cdn')
   + '.technoratimedia.com/00/81/95/uat_19581.js?ad_size=300x250"></scri' + 'pt>');
</script>

更新：

仅在文档加载后才编写它怎么样？喜欢：

    <script type="text/javascript">
window.addEventListener('DOMContentLoaded', function() {
       document.write('<scri' + 'pt type="text/javascript" defer src="'
       + (document.location.protocol == 'https:' ? 'https://uat-secure' : 'http://ad-cdn')
       + '.technoratimedia.com/00/81/95/uat_19581.js?ad_size=300x250"></scri' + 'pt>');
}
    </script>

您也可以使用<body onload="writeTheScript()">，这取决于您的意图。

更新 2：

那是因为 document.write 覆盖了内容。试试这个方法：

<script type="text/javascript">
window.addEventListener('DOMContentLoaded', function() {
    var scriptElement = document.createElement('script');
    scriptElement.setAttribute('src',''
            + (document.location.protocol == 'https:' ? 'https://uat-secure' : 'http://ad-cdn')
            + '.technoratimedia.com/00/81/95/uat_19581.js?ad_size=300x250');
    scriptElement.setAttribute('type', 'text/javascript');
    document.body.appendChild(scriptElement);
});
</script>

【讨论】：

我在上面说过“我尝试了多种方法，但都没有奏效。”可悲的是，这是其中之一......
@JosephRaphael 很好，所以列出你尝试过的东西，我们不知道
我尝试了上面的新代码，现在页面根本没有加载feat.youmobile.org

【解决方案2】：

我的问题已使用一个名为“Postscribe”的异步延迟加载广告的 javascript 库解决

使用 PostScribe + HTMLParser http://www.youmobile.org/about/ 的页面示例

这里是其 Github 的链接https://github.com/krux/postscribe

这是我使用的代码，巨大的性能变化：

<center><div id="ad1" class="center grey-text">Advertisement</div></center>
<script type="text/javascript">
  $(function() {
    postscribe('#ad1', '<scri' + 'pt type="text/javascript" src="'
   + (document.location.protocol == 'https:' ? 'https://uat-secure' : 'http://ad-cdn')
   + '.technoratimedia.com/00/81/95/uat_19581.js?ad_size=300x250"></scri' + 'pt>');
  });
</script>

【讨论】：

2天后会批准上面的答案，希望对大家有帮助