Javascript 实现广告后加载 可加载百度谷歌联盟广告 原创

Javascript 实现广告后加载 可加载百度谷歌联盟广告

简介

在网页应用开发中，广告投放是一项重要的商业模式，但是直接加载广告会影响页面的加载速度和用户体验。为了解决这个问题，通常会采用广告异步加载的方式，即在页面初始化后再加载广告。本文将详细讲解如何使用Javascript实现广告后加载，以及如何加载百度谷歌联盟广告。

实现方式

1. 使用div容器加载广告

首先，我们需要在html页面中建立一个div容器，然后在需要加载广告的位置插入这个div容器。

<div id="ad-container"></div>

然后，在Javascript中获取这个div容器，并将广告嵌入到这个容器中。具体的实现方式可以参照下面的示例。

function loadAd() {
  var container = document.getElementById('ad-container');
  var ad = '<!--这里填写广告代码-->';
  container.innerHTML = ad;
}
window.onload = loadAd;

其中，var ad = '<!--这里填写广告代码-->'; 的内容需要替换成具体的广告代码。这样，在页面加载完成后，广告才会被加载并显示。

2. 实现百度谷歌联盟广告

如果要加载百度谷歌联盟广告，我们需要引入对应的广告库，并按照它们的要求嵌入广告代码。具体的实现方式可以参照下面的示例。

<!-- 在head标签中引入百度联盟广告库 -->
<script type="text/javascript" src="//dup.baidustatic.com/js/dm.js"></script>

<!-- 在head标签中引入谷歌联盟广告库 -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

然后，在需要加载百度联盟广告的位置插入下面的代码，并替换其中的广告位ID：

<div id="ad-container">
  <div class="dtm-wrap">
    <div id="dmp_ad_123" style="width:300px;height:250px;"></div>
  </div>
</div>
<script>
  DUpa(this).async['123']();
</script>

其中，div 的ID需要替换成具体的广告位ID，并按照百度联盟广告的要求嵌入代码。同样的，如果要加载谷歌联盟广告，可以参照下面的示例进行操作。

<div id="ad-container">
  <ins class="adsbygoogle"
       style="display:block"
       data-ad-client="ca-pub-xxxxxxxxxx"
       data-ad-slot="1234567890"
       data-ad-format="auto"></ins>
  <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
  </script>
</div>

其中，data-ad-client 和 data-ad-slot 需要替换成具体的谷歌联盟广告ID。

总结

以上就是Javascript实现广告后加载的完整攻略，通过以上方法可以避免直接加载广告影响页面的加载速度，并且可以根据需要加载百度谷歌联盟广告。