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 相关文章推荐
网页整体变灰白色(兼容各浏览器)实例
Apr 21 Javascript
JS实现拖动示例代码
Nov 01 Javascript
在JavaScript中处理字符串之fontcolor()方法的使用
Jun 08 Javascript
浅谈String.valueOf()方法的使用
Jun 06 Javascript
jQuery实现div横向拖拽排序的简单实例
Jul 13 Javascript
javascript中的 object 和 function小结
Aug 14 Javascript
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
JS实现带动画的回到顶部效果
Dec 28 Javascript
微信小程序用户授权、位置授权及获取微信绑定手机号
Jul 18 Javascript
KnockoutJS数组比较算法实例详解
Nov 25 Javascript
微信小程序实现同时上传多张图片
Feb 03 Javascript
Jquery使用each函数实现遍历及数组处理
Jul 14 jQuery
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
MySql 按时间段查询数据方法(实例说明)
2008/11/02 PHP
php实现利用phpexcel导出数据
2013/08/24 PHP
PHP排序算法类实例
2015/06/17 PHP
Apache启动报错No space left on device: AH00023该怎么解决
2015/10/16 PHP
Add a Table to a Word Document
2007/06/15 Javascript
window.location和document.location的区别分析
2008/12/23 Javascript
jquery实现metro效果示例代码
2013/09/06 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
2016/12/14 Javascript
JS实现json的序列化和反序列化功能示例
2017/06/13 Javascript
Vue组件选项props实例详解
2017/08/18 Javascript
如何为vuex实现带参数的 getter和state.commit
2019/01/04 Javascript
vue.js this.$router.push获取不到params参数问题
2020/03/03 Javascript
从零开始在vue-cli4配置自适应vw布局的实现
2020/06/08 Javascript
在VUE style中使用data中的变量的方法
2020/06/19 Javascript
[05:13]TI4 中国战队 机场出征!!
2014/07/07 DOTA
Django 限制用户访问频率的中间件的实现
2018/08/23 Python
Python实现多进程的四种方式
2019/02/22 Python
把JSON数据格式转换为Python的类对象方法详解(两种方法)
2019/06/04 Python
Django实现简单网页弹出警告代码
2019/11/15 Python
Python数据可视化:泊松分布详解
2019/12/07 Python
python实现图片转换成素描和漫画格式
2020/08/19 Python
使用HTML5 IndexDB存储图像和文件的示例
2018/11/05 HTML / CSS
利用canvas实现图片下载功能来实现浏览器兼容问题
2019/05/31 HTML / CSS
HTML5 移动页面自适应手机屏幕四类方法总结
2017/08/17 HTML / CSS
黑猩猩商店:The Chimp Store
2020/02/12 全球购物
Wiggle新西兰:自行车、跑步、游泳
2020/05/06 全球购物
银行财务部实习生的自我鉴定
2013/11/27 职场文书
车间组长岗位职责
2013/12/20 职场文书
中班开学寄语
2014/04/04 职场文书
工作检讨书怎么写
2015/01/23 职场文书
毕业生对母校寄语
2015/02/26 职场文书
学雷锋献爱心活动总结
2015/05/11 职场文书
2015年幼儿园德育工作总结
2015/05/25 职场文书
高中政治教学反思
2016/02/23 职场文书
2016年学校十一国庆节活动总结
2016/04/01 职场文书
MySql数据库触发器使用教程
2022/06/01 MySQL