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 相关文章推荐
跨浏览器开发经验总结(四) 怎么写入剪贴板
May 13 Javascript
jquery 新浪网易的评论块制作
Jul 01 Javascript
定义JavaScript二维数组采用定义数组的数组来实现
Dec 09 Javascript
Node.js中require的工作原理浅析
Jun 24 Javascript
Google Maps API地图应用示例分享
Oct 23 Javascript
jQuery解析json数据实例分析
Nov 24 Javascript
基于jQuery实现返回顶部实例代码
Jan 01 Javascript
AngularJS学习笔记(三)数据双向绑定的简单实例
Nov 08 Javascript
JS设置手机验证码60s等待实现代码
Jun 14 Javascript
详解vue.js的事件处理器v-on:click
Jun 27 Javascript
使用命令行工具npm新创建一个vue项目的方法
Dec 27 Javascript
JS删除数组里的某个元素方法
Feb 03 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中文乱码怎么办如何让浏览器自动识别utf-8
2014/01/15 PHP
typecho插件编写教程(二):写一个新插件
2015/05/28 PHP
PHP实现简单日历类编写
2020/08/28 PHP
火狐下input焦点无法重复获取问题的解决方法
2014/06/16 Javascript
JS获取当前日期时间并定时刷新示例
2021/03/04 Javascript
jQuery对val和atrr(&quot;value&quot;)赋值的区别介绍
2014/09/26 Javascript
jquery中获取元素里某一特定子元素的代码
2014/12/02 Javascript
javascript实现滑动解锁功能
2014/12/31 Javascript
后台获取ZTREE选中节点的方法
2015/02/12 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
2015/07/21 Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
2015/12/28 Javascript
基于jQuery实现多标签页切换的效果(web前端开发)
2016/07/24 Javascript
Bootstrap CSS布局之图像
2016/12/17 Javascript
原生js封装自定义滚动条
2017/03/24 Javascript
Angular动态添加、删除输入框并计算值实例代码
2017/03/29 Javascript
vue-router路由参数刷新消失的问题解决方法
2017/06/17 Javascript
js实现随机点名小功能
2017/08/17 Javascript
Javascript中将变量转换为字符串的三种方法
2017/09/19 Javascript
如何利用vue+vue-router+elementUI实现简易通讯录
2019/05/13 Javascript
[02:50]2014DOTA2 TI预选赛预选赛 大神专访第一弹!
2014/05/21 DOTA
Python中集合的内建函数和内建方法学习教程
2015/08/19 Python
python if not in 多条件判断代码
2016/09/21 Python
TensorFlow saver指定变量的存取
2018/03/10 Python
python脚本开机自启的实现方法
2019/06/28 Python
Python企业编码生成系统之系统主要函数设计详解
2019/07/26 Python
使用Python快乐学数学Github万星神器Manim简介
2019/08/07 Python
python3 selenium自动化 frame表单嵌套的切换方法
2019/08/23 Python
PyTorch实现重写/改写Dataset并载入Dataloader
2020/07/14 Python
Python 操作SQLite数据库的示例
2020/10/16 Python
Autopep8的使用(python自动编排工具)
2021/03/02 Python
欧缇丽加拿大官方网站:Caudalie加拿大
2019/07/18 全球购物
医护人员英文求职信范文
2013/11/26 职场文书
让世界充满爱演讲稿
2014/05/24 职场文书
祝酒词范文
2015/08/12 职场文书
幼儿园托班开学寄语(2016春季)
2015/12/03 职场文书
小学班主任培训心得体会
2016/01/07 职场文书