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

Javascript 实现广告后加载可加载百度谷歌联盟广告[原创]_javascript技巧

php中文网

发布： 2016-05-19 10:42:37

原创

1273人浏览过

　　本文主要介绍一种新的广告后加载的方式，支持自定义html广告、百度联盟广告和谷歌联盟广告。这种方式在页面加载完成后执行，不影响内容的显示，对用户更加友好。

　　我们在网站上放置广告，最简单的方法就是把JS代码，插入指定的位置，这样带了后果就是，页面按照顺序加载，偶尔一条广告代码卡住，整个页面都会卡住，给用户带来的体验是极差的。

　　那么怎么解决这种问题呢？先说一下原理，在我们的页面上先预留一些占位符，为了不影响页面内容的加载，我们在页面的底部引入JS处理，逐个把占位符替换成相应的广告。

下面我们看具体的实现步骤：

一、在页面上放置占位符，其实就是一个span标记

立即学习“Java免费学习笔记（深入）”；

复制代码代码如下:

二、编写独立的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         if (jbTestPos[i].className == "jbTestPos") {
            jbTest = jbTestPos[i];
            break
        }
    }
    if (jbTest == null) return;
    if (!closetag) {
        document.write("");
    var real = document.getElementById("jbTestPos_" + jbTest.id);
    for (var i = 0; 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('http://www.jb51.net/" target="_blank">本站');
};

jbMap['ads_two'] = function() {
document.writeln('javascript">var cpro_id = "u336546";'+'ipt>');
};

jbMap['ads_three'] = function() {
document.writeln(''+'pt>(adsbygoogle">http://www.jb51.net">(adsbygoogle = window.adsbygoogle || []).push({});'+'cript>');
};

注意：jbMap是放置广告的数组，数组的Key和Span标记的ID是对应的，我们可以在这个JS中按照这种形式添加自己的广告。这种广告加载方式，支持自定义的HTML广告、百度联盟广告、谷歌联盟广告，这里都给大家做了演示。

三、在页面底部中引入JS，调用jbLoader加载广告

复制代码代码如下:

<script>jbLoader();</script>
<script>jbLoader();</script>
<script>jbLoader();</script>

注意：格式必须是如上这种格式，有几个占位符，就添加几个<script>jbLoader();</script>

不要问小编为什么要这样调用，其实小编也研究了一下：
1.第一次jbLoader()是为了写标记，第二次jbLoader(true)是为了替换标记。
2.用两个<script>是为了第二次调用能取到相应的元素。<br /> 3.有几个占位符就写几行script是为了互不影响，各显示各的。</script>

总之：好多大网站都在使用这种方法，大家放心用好了。至此，就完成了页面广告后加载的调用。