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 THICKBOX弹出层插件
Aug 30 Javascript
jQuery ui1.7 dialog只能弹出一次问题
Aug 27 Javascript
关于Mozilla浏览器不支持innerText的解决办法
Jan 01 Javascript
JQuery 文本框回车跳到下一个文本框示例代码
Aug 30 Javascript
jQuery分别获取选中的复选框值的示例
Jun 17 Javascript
jQuery 浮动导航菜单适合购物商品类型的网站
Sep 09 Javascript
js弹出对话框方式小结
Nov 17 Javascript
基于jQuery实现左右图片轮播(原理通用)
Dec 24 Javascript
jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】
Mar 08 Javascript
利用C/C++编写node.js原生模块的方法教程
Jul 07 Javascript
JavaScript格式化json和xml的方法示例
Jan 22 Javascript
React组件对子组件children进行加强的方法
Jun 23 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
第十节 抽象方法和抽象类 [10]
2006/10/09 PHP
非常好用的两个PHP函数 serialize()和unserialize()
2012/02/04 PHP
php过滤html中的其他网站链接的方法(域名白名单功能)
2014/04/24 PHP
destoon二次开发模板及调用语法汇总
2014/06/21 PHP
ThinkPHP中的系统常量和预定义常量集合
2014/07/01 PHP
laravel框架创建授权策略实例分析
2019/11/22 PHP
拉动滚动条加载数据的jquery代码
2012/05/03 Javascript
JS取文本框中最小值的简单实例
2013/11/29 Javascript
js中文逗号转英文实现
2014/02/11 Javascript
原生Js实现简易烟花爆炸效果的方法
2015/03/20 Javascript
详解JavaScript中常用的函数类型
2015/11/18 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
2015/11/26 Javascript
JQuery EasyUI的使用
2016/02/24 Javascript
javascript获取select标签选中的值
2016/06/04 Javascript
jQuery双向列表选择器DIV模拟版
2016/11/01 Javascript
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
2017/11/28 Javascript
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
2018/01/26 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
2018/03/05 Javascript
4个顶级JavaScript高级文本编辑器
2018/10/10 Javascript
[01:12:53]完美世界DOTA2联赛PWL S2 Forest vs SZ 第一场 11.25
2020/11/26 DOTA
在Django的视图(View)外使用Session的方法
2015/07/23 Python
Python程序中用csv模块来操作csv文件的基本使用教程
2016/03/03 Python
PYQT5实现控制台显示功能的方法
2019/06/25 Python
python操作cfg配置文件方式
2019/12/22 Python
pyCharm 实现关闭代码检查
2020/06/09 Python
利用Python过滤相似文本的简单方法示例
2021/02/03 Python
美国男装连锁零售商:Men’s Wearhouse
2016/10/14 全球购物
GetYourGuide台湾:预订旅游活动、景点和旅游项目
2019/06/10 全球购物
保研推荐信
2014/05/09 职场文书
雷锋精神演讲稿
2014/05/13 职场文书
正风肃纪剖析材料范文
2014/10/10 职场文书
实习证明格式范文
2014/10/14 职场文书
导师工作推荐信
2015/03/27 职场文书
用python实现监控视频人数统计
2021/05/21 Python
Python的这些库,你知道多少?
2021/06/09 Python
Mysql binlog日志文件过大的解决
2021/10/05 MySQL