Javascript 实现广告后加载 可加载百度谷歌联盟广告 原创
本文主要介绍一种新的广告后加载的方式，支持自定义HTML广告、百度联盟广告和谷歌联盟广告。这种方式在页面加载完成后执行，不影响内容的显示，对用户更加友好。
我们在网站上放置广告，最简单的方法就是把JS代码，插入指定的位置，这样带了后果就是，页面按照顺序加载，偶尔一条广告代码卡住，整个页面都会卡住，给用户带来的体验是极差的。
那么怎么解决这种问题呢？先说一下原理，在我们的页面上先预留一些占位符，为了不影响页面内容的加载，我们在页面的底部引入JS处理，逐个把占位符替换成相应的广告。
下面我们看具体的实现步骤：
一、在页面上放置占位符，其实就是一个span标记
<spanid="ads_one"class="jbTestPos"></span> <spanid="ads_two"class="jbTestPos"></span> <spanid="ads_three"class="jbTestPos"></span>
二、编写独立的JS脚本代码：jbLoader.js
jbMap=window.jbMap||{};
functionjbViaJs(locationId){
var_f=undefined;
var_fconv='jbMap[\"'+locationId+'\"]';
try{
_f=eval(_fconv);
if(_f!=undefined){
_f()
}
}catch(e){}
}
functionjbLoader(closetag){
varjbTest=null,
jbTestPos=document.getElementsByTagName("span");
for(vari=0;i<jbTestPos.length;i++){
if(jbTestPos[i].className=="jbTestPos"){
jbTest=jbTestPos[i];
break
}
}
if(jbTest==null)return;
if(!closetag){
document.write("<spanid=jbTestPos_"+jbTest.id+"style=display:none>");
jbViaJs(jbTest.id);
return
}
document.write("</span>");
varreal=document.getElementById("jbTestPos_"+jbTest.id);
for(vari=0;i<real.childNodes.length;i++){
varnode=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('<ahref="https://www.nhooo.com/"target="_blank">毛票票</a>');
};
jbMap['ads_two']=function(){
document.writeln('<scr'+'ipttype="text/javascript">varcpro_id="u336546";</script><scriptsrc="http://cpro.baidustatic.com/cpro/ui/c.js"type="text/javascript"></scr'+'ipt>');
};
jbMap['ads_three']=function(){
document.writeln('<scri'+'ptasyncsrc="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></scri'+'pt><insclass="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.nhooo.com"></ins><scri'+'pt>(adsbygoogle=window.adsbygoogle||[]).push({});</s'+'cript>');
};
注意：jbMap是放置广告的数组，数组的Key和Span标记的ID是对应的，我们可以在这个JS中按照这种形式添加自己的广告。这种广告加载方式，支持自定义的HTML广告、百度联盟广告、谷歌联盟广告，这里都给大家做了演示。
三、在页面底部中引入JS，调用jbLoader加载广告
<scripttype="text/javascript"src='js/jbLoader.js'></script> <script>jbLoader();</script><scriptclass="closetag">jbLoader(true);</script> <script>jbLoader();</script><scriptclass="closetag">jbLoader(true);</script> <script>jbLoader();</script><scriptclass="closetag">jbLoader(true);</script>
注意：格式必须是如上这种格式，有几个占位符，就添加几个<script>jbLoader();</script><scriptclass="closetag">jbLoader(true);</script>
不要问小编为什么要这样调用，其实小编也研究了一下：
1.第一次jbLoader()是为了写标记，第二次jbLoader(true)是为了替换标记。
2.用两个<script>是为了第二次调用能取到相应的元素。
3.有几个占位符就写几行script是为了互不影响，各显示各的。
总之：好多大网站都在使用这种方法，大家放心用好了。至此，就完成了页面广告后加载的调用。