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


Posted in Javascript onNovember 25, 2010

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

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

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

<div id="myads">载入中…</div>

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="//img.jbzj.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>
Javascript 相关文章推荐
jQuery 1.5.1 发布,全面支持IE9 修复大量bug
Feb 26 Javascript
jquery 缓存问题的几个解决方法
Nov 11 Javascript
JavaScript中计算网页中某个元素的位置
Jun 10 Javascript
基于jQuery实现搜索关键字自动匹配功能
Mar 26 Javascript
JavaScript中获取时间的函数集
Aug 16 Javascript
javascript中json对象json数组json字符串互转及取值方法
Apr 19 Javascript
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
vue中v-for加载本地静态图片方法
Mar 03 Javascript
vue采用EventBus实现跨组件通信及注意事项小结
Jun 14 Javascript
详解React之父子组件传递和其它一些要点
Jun 25 Javascript
微信小程序搭建自己的Https服务器
May 02 Javascript
Vue.js数字输入框组件使用方法详解
Oct 19 Javascript
js页面跳转常用的几种方式
Nov 25 #Javascript
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
Nov 25 #Javascript
javascript showModalDialog 内跳转页面的问题
Nov 25 #Javascript
颜色选择器 Color Picker,IE,Firefox,Opera,Safar
Nov 25 #Javascript
jQuery 选择器、DOM操作、事件、动画
Nov 25 #Javascript
jQuery学习基础知识小结
Nov 25 #Javascript
javascript预览上传图片发现的问题的解决方法
Nov 25 #Javascript
You might like
PHP跳转页面的几种实现方法详解
2013/06/08 PHP
PHP实现读取一个1G的文件大小
2013/08/24 PHP
ThinkPHP的MVC开发机制实例解析
2014/08/23 PHP
PHP生成短网址方法汇总
2016/07/12 PHP
JavaScript入门教程(8) Location地址对象
2009/01/31 Javascript
JS控制文本框textarea输入字数限制的方法
2013/06/17 Javascript
JavaScript检测上传文件大小的方法
2015/07/22 Javascript
9个让JavaScript调试更简单的Console命令
2016/11/14 Javascript
原生JS实现导航下拉菜单效果
2020/11/25 Javascript
AngularJS读取JSON及XML文件的方法示例
2017/05/25 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
2018/02/14 Javascript
详解Angular5 路由传参的3种方法
2018/04/28 Javascript
微信小程序中的canvas 文字断行和省略号显示功能的处理方法
2018/11/14 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
2019/06/10 jQuery
微信小程序onShareTimeline()实现分享朋友圈
2021/01/07 Javascript
JavaScript实现消消乐的源代码
2021/01/12 Javascript
Django与遗留的数据库整合的方法指南
2015/07/24 Python
python 开发的三种运行模式详细介绍
2017/01/18 Python
python 文件操作删除某行的实例
2017/09/04 Python
python去除扩展名的实例讲解
2018/04/23 Python
tensorflow实现简单的卷积网络
2018/05/24 Python
python最长回文串算法
2018/06/04 Python
几行Python代码爬取3000+上市公司的信息
2019/01/24 Python
Python爬取知乎图片代码实现解析
2019/09/17 Python
python3 tkinter实现添加图片和文本
2019/11/26 Python
python Cartopy的基础使用详解
2020/11/01 Python
英国度假别墅预订:Sykes Cottages
2017/06/12 全球购物
本科毕业生自我鉴定
2013/11/02 职场文书
楼面部长岗位职责范本
2014/02/14 职场文书
人事部专员岗位职责
2014/03/04 职场文书
乡镇网格化管理实施方案
2014/03/23 职场文书
作风大整顿心得体会
2014/09/10 职场文书
面试感谢信范文
2015/01/22 职场文书
党员心得体会范文2016
2016/01/23 职场文书
资深HR教你写好简历中的自我评价
2019/05/07 职场文书
TensorFlow中tf.batch_matmul()的用法
2021/06/02 Python