本文主要介紹一種新的廣告后加載的方式，支持自定義HTML廣告、百度聯(lián)盟廣告和谷歌聯(lián)盟廣告。這種方式在頁面加載完成后執(zhí)行，不影響內(nèi)容的顯示，對用戶更加友好。

本文主要介紹一種新的廣告后加載的方式，支持自定義HTML廣告、百度聯(lián)盟廣告和谷歌聯(lián)盟廣告。這種方式在頁面加載完成后執(zhí)行，不影響內(nèi)容的顯示，對用戶更加友好。

我們在網(wǎng)站上放置廣告，最簡單的方法就是把JS代碼，插入指定的位置，這樣帶了后果就是，頁面按照順序加載，偶爾一條廣告代碼卡住，整個頁面都會卡住，給用戶帶來的體驗是極差的。

那么怎么解決這種問題呢？先說一下原理，在我們的頁面上先預留一些占位符，為了不影響頁面內(nèi)容的加載，我們在頁面的底部引入JS處理，逐個把占位符替換成相應的廣告。

下面我們看具體的實現(xiàn)步驟：

一、在頁面上放置占位符，其實就是一個span標記

代碼如下:

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

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

<span id="ads_three" class="jbTestPos"></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 < 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 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="http://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="http://www.jb51.net"></ins><scri'+'pt>(adsbygoogle = window.adsbygoogle || []).push({});</s'+'cript>');

};

注意：jbMap是放置廣告的數(shù)組，數(shù)組的Key和Span標記的ID是對應的，我們可以在這個JS中按照這種形式添加自己的廣告。這種廣告加載方式，支持自定義的HTML廣告、百度聯(lián)盟廣告、谷歌聯(lián)盟廣告，這里都給大家做了演示。

三、在頁面底部中引入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>是為了第二次調用能取到相應的元素。

3.有幾個占位符就寫幾行script是為了互不影響，各顯示各的。

總之：好多大網(wǎng)站都在使用這種方法，大家放心用好了。至此，就完成了頁面廣告后加載的調用。