JavaScript 实现广告后加载：优化页面体验的百度与谷歌联盟广告方案

广告后加载方案概述

本文介绍一种改进的广告加载机制，支持自定义 HTML 广告、百度联盟广告以及谷歌联盟广告。该方案在页面主体内容加载完毕后执行，确保不影响用户正常浏览内容，从而提供更友好的用户体验。

在网站上嵌入广告时，最简单的方式是将 JS 代码直接插入指定位置。然而，这种方式会导致页面按顺序加载，若某条广告代码执行缓慢或出错，整个页面都会随之卡顿，严重影响用户交互体验。

为解决上述问题，核心思路是：在页面中预先设置占位符，并在页面底部引入 JS 处理逻辑，逐个将占位符替换为对应的广告内容。这样既保证了页面内容的快速展示，又实现了广告的加载。

接下来介绍具体的实现步骤。

HTML 占位符设置

第一步，在页面中放置占位符，具体为一个 span 标签。

<span id="ads_one" class="jbTestPos"></span>
<span id="ads_two" class="jbTestPos"></span>
<span id="ads_three" class="jbTestPos"></span>

JS 脚本逻辑实现

第二步，编写独立的 JS 脚本文件：jbLoader.js。

jbMap = window.jbMap || {};
function jbViaJs(locationId) {
var _f = undefined;
var _fconv = 'jbMap[\"' + locationId + '\"]';
try {
_f = eval(_fconv);
if (_f != undefined) {
_f()
        }
} catch(e) {}
}
function jbLoader(closetag) {
var jbTest = null,
jbTestPos = document.getElementsByTagName("span");
for (var i = 0; i < jbTestPos.length; i++) {
if (jbTestPos[i].className == "jbTestPos") {
jbTest = jbTestPos[i];
break
        }
    }
if (jbTest == null) return;
if (!closetag) {
document.write("<span id=jbTestPos_" + jbTest.id + " style=display:none>");
jbViaJs(jbTest.id);
return
    }
document.write("</span>");
var real = document.getElementById("jbTestPos_" + jbTest.id);
for (var i = 0; i < real.childNodes.length; i++) {
var node = real.childNodes[i];
if (node.tagName == "SCRIPT" && /closetag/.test(node.className)) continue;
jbTest.parentNode.insertBefore(node, jbTest);
i--
    }
jbTest.parentNode.removeChild(jbTest);
real.parentNode.removeChild(real)
}
 
jbMap['ads_one'] = function() {
document.writeln('<a href="https://www.jb51.net/" target="_blank">本站</a>');
};
 
jbMap['ads_two'] = function() {
document.writeln('<scr'+'ipt type="text/javascript">var cpro_id = "u336546";</script><script src="http://cpro.baidustatic.com/cpro/ui/c.js" type="text/javascript"></scr'+'ipt>');
};
 
jbMap['ads_three'] = function() {
document.writeln('<scri'+'pt async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></scri'+'pt><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-1247620132145618" data-ad-slot="2253650178" data-override-format="true" data-page-url="https://www.jb51.net"></ins><scri'+'pt>(adsbygoogle = window.adsbygoogle || []).push({});</s'+'cript>');
};

注意：jbMap 是用于存储广告配置的数组，其 Key 与 Span 标记的 ID 一一对应。开发者可根据此格式在 JS 中添加自定义广告。该方案支持自定义 HTML 广告、百度联盟广告及谷歌联盟广告，文中已提供相应示例。

页面底部调用与配置

第三步，在页面底部引入 JS 文件，并调用 jbLoader 函数加载广告。

<script type="text/javascript" src='js/jbLoader.js'></script>
<script>jbLoader();</script><script class="closetag">jbLoader(true);</script>
<script>jbLoader();</script><script class="closetag">jbLoader(true);</script>
<script>jbLoader();</script><script class="closetag">jbLoader(true);</script>

注意：调用格式必须如上所示。页面中有多少个占位符，就需要对应添加几组 <script>jbLoader();</script><script class="closetag">jbLoader(true);</script> 代码。

关于为何采用这种调用方式，简要说明如下： 1. 第一次调用 jbLoader() 用于生成临时标记，第二次调用 jbLoader(true) 用于替换标记。 2. 使用两个 <script> 标签是为了确保第二次调用时能正确获取到相应的 DOM 元素。 3. 每个占位符对应一行 script 调用，是为了确保各广告之间互不干扰，独立显示。

综上所述，许多大型网站均采用此类方法，大家可以放心使用。至此，页面广告后加载的调用流程即告完成。