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 相关文章推荐
类似框架的js代码
Nov 09 Javascript
模仿jQuery each函数的链式调用
Jul 22 Javascript
jquery动态改变onclick属性导致失效的问题解决方法
Dec 04 Javascript
node.js中的path.delimiter方法使用说明
Dec 09 Javascript
JavaScript使用DeviceOne开发实战(一) 配置和起步
Dec 01 Javascript
js判断移动端是否安装某款app的多种方法
Dec 18 Javascript
详解微信小程序 页面跳转 传递参数
Dec 08 Javascript
livereload工具实现前端可视化开发【推荐】
Dec 23 Javascript
如何写好你的JavaScript【推荐】
Mar 02 Javascript
Vue.js如何实现路由懒加载浅析
Aug 14 Javascript
postman+json+springmvc测试批量添加实例
Mar 31 Javascript
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
Nov 22 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判断网页是否gzip压缩
2013/06/25 PHP
PHP高级编程实例:编写守护进程
2014/09/02 PHP
Yii框架中memcache用法实例
2014/12/03 PHP
支持汉转拼和拼音分词的PHP中文工具类ChineseUtil
2018/02/23 PHP
JavaScript设置FieldSet展开与收缩
2009/05/15 Javascript
js 复制或插入Html的实现方法小结
2010/05/19 Javascript
javascript的解析执行顺序在各个浏览器中的不同
2014/03/17 Javascript
jQuery插件制作之全局函数用法实例
2015/06/01 Javascript
javascript实现简单的分页特效
2015/08/12 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
2016/09/02 Javascript
基于bootstrap实现收缩导航条
2017/03/17 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
2017/06/28 Javascript
JavaScript使用Ajax上传文件的示例代码
2017/08/10 Javascript
JS实现图片手风琴效果
2020/04/17 Javascript
基于Vue生产环境部署详解
2017/09/15 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
2017/11/27 Javascript
nodeJS模块简单用法示例
2018/04/21 NodeJs
详解vue组件开发脚手架
2018/06/15 Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
2018/08/22 Javascript
微信小程序使用wxParse解析html的方法示例
2019/01/17 Javascript
vue 中使用 watch 出现了如下的报错的原因分析
2019/05/21 Javascript
Vue性能优化的方法
2020/07/30 Javascript
python中from module import * 的一个坑
2014/07/20 Python
开源Web应用框架Django图文教程
2017/03/09 Python
导致python中import错误的原因是什么
2020/07/01 Python
20行代码教你用python给证件照换底色的方法示例
2021/02/05 Python
HTML5 canvas实现雪花飘落特效
2016/03/08 HTML / CSS
JD Sports意大利:英国篮球和运动时尚的领导者
2017/10/29 全球购物
瑞典香水、须后水和美容产品购物网站:Parfym-Klick.se
2019/12/29 全球购物
员工年终演讲稿
2014/01/03 职场文书
摄影专业毕业生求职信
2014/03/13 职场文书
师德师风个人反思
2014/04/28 职场文书
2014年党建工作汇报材料
2014/11/02 职场文书
办公室岗位职责范本
2015/04/11 职场文书
大学生十八大感想
2015/08/11 职场文书
mysql如何能有效防止删库跑路
2021/10/05 MySQL