Home  >  Article  >  Web Front-end  >  Javascript 实现广告后加载 可加载百度谷歌联盟广告[原创]_javascript技巧

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

WBOY
WBOYOriginal
2016-05-19 10:42:371128browse

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

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

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

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

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

复制代码 代码如下:




二、编写独立的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('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>

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

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn