javascript 广告后加载，加载完页面再加载广告

128 阅读 0 评论 85 点赞

我是靠谱客的博主听话大米，最近开发中收集的这篇文章主要介绍javascript 广告后加载，加载完页面再加载广告，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

先加载完页面再加载广告的原理：

网页打开的顺序都是按页面从上到下的顺序加载完成的，所以要想使广告不影响页面打开速度，就要等页面全部打开完成后，再加载JS代码。等页面加载完再加载广告其实就是将广告的 JS 代码放在页面的底部，等页面内容打开完成后再加载到广告代码，再用页面上预留好的的 DIV 输出广告。

使用方法：
1、将以下代码放置页面中想要放广告的地方

复制代码代码如下:

2、将一下代码放置页面底部，也就是footer，php文件的底部。

复制代码代码如下:

 
<div id="span_myads">这里放广告代码</div> 

<script type="text/javascript"> 

document.getElementById("myads").innerHTML = document.getElementById("span_myads").innerHTML; 

document.getElementById("span_myads").innerHTML = ""; 

</script>

OK，这样就实现了先加载完页面再加载广告了，怎么样不影响大家阅读吧.

上面的方法可以加载任何方式的广告，但现在百度与google的都不让使用了，容易造成广告的二次加载，点击率也会降低。下面脚本之家小编为大家分享下，比较新的加载广告的方式：

1、可以加载字符串类型与google类型的

<div id="logo_m"></div>
<script>
function doad(datastr,id){ 
//getid(id).innerHTML = datastr; 这个是原生js的写法
$("#"+id).html(datastr); //这个是jquery写法
}
/*
上面的都是直接的字符串写入，不能是js代码
下面的代码利用的是jquery的append加载google广告不错，百度的好像不能用。后加载百度的可以是用百度管家自带的函数。
*/
function doad2(datastr,id){ 
$("#"+id).append(datastr);
}

var logo_m='<a href="http://www.danhw.com/" target="_blank"><img src="http://files.uoften.com/image/kongbao_370.gif" width=370 height=60 /></a>';
doad(logo_m,'logo_m');
</script>

2、可以加载google广告的代码

$(document).ready(function(){
	$('#google_ads_1').append("" +
	"<script src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>"+
	"<!-- question-side -->"+
	"<ins class="adsbygoogle""+
	"   style="display:inline-block;width:728px;height:90px""+
	"   data-ad-client="ca-pub-345345345345""+
	"   data-ad-slot="345345345"></ins>"+
	"<script>"+
	"  (adsbygoogle = window.adsbygoogle || []).push({});"+
	"</script>");
});

一般都是页面完全加载完，再加的广告，当然现在google现在新出的异步加载广告的代码也是挺快的，不会卡网页了。
上面的都是后加载google的异步广告代码。

对于这样的字符加载方法，个人不太喜欢，我还是比较喜欢这样的，代码如下

var botad='<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>';
botad+='<ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-343534534" data-ad-slot="6343459"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script>';

$(document).ready(function(){
	$('#google_ads_1').append();
});

3、可以加载百度广告联盟的代码
百度管家自带的后加载广告的代码，基于jquery

<div id="tonglanbd"></div>
<script type="text/javascript">
$.getScript("http://cbjs.baidu.com/js/m.js", function() {
BAIDU_CLB_fillSlotAsync("广告id，不能带u","tonglanbd");
});
</script>