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 相关文章推荐
JavaScript 替换Html标签实现代码
Oct 14 Javascript
JavaScript中的document.referrer在各种浏览器测试结果
Jul 18 Javascript
js触发select onchange事件的小技巧
Aug 05 Javascript
使用JS获取当前地理位置方法汇总
Dec 18 Javascript
2则自己编写的jQuery特效分享
Feb 26 Javascript
JS获取鼠标选中的文字
Aug 10 Javascript
解决vue组件中使用v-for出现告警问题及v for指令介绍
Nov 11 Javascript
BootStrap自定义popover,点击区域隐藏功能的实现
Jan 23 Javascript
vue实现动态显示与隐藏底部导航的方法分析
Feb 11 Javascript
vue组件化中slot的基本使用方法
May 01 Javascript
微信小程序仿今日头条导航栏滚动解析
Aug 20 Javascript
vue项目开启Gzip压缩和性能优化操作
Oct 26 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命名空间(Namespace)简明教程
2014/06/11 PHP
PHP 只允许指定IP访问(允许*号通配符过滤IP)
2014/07/08 PHP
自编函数解决pathinfo()函数处理中文问题
2014/11/03 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
js判断变量是否未定义的代码
2020/03/28 Javascript
Javascript中克隆一个数组的实现代码
2013/12/06 Javascript
用jQuery toggleClass 实现鼠标移上变色
2014/05/14 Javascript
js HTML5 Ajax实现文件上传进度条功能
2016/02/13 Javascript
jQuery UI库中dialog对话框功能使用全解析
2016/04/23 Javascript
基于vue.js实现侧边菜单栏
2017/03/20 Javascript
jquery select插件异步实时搜索实例代码
2017/10/20 jQuery
jQuery Datatables表头不对齐的解决办法
2017/11/27 jQuery
浅谈webpack组织模块的原理
2018/03/10 Javascript
基于vue-simplemde实现图片拖拽、粘贴功能
2018/04/12 Javascript
vue-router的HTML5 History 模式设置
2018/09/08 Javascript
VSCode 配置uni-app的方法
2020/07/11 Javascript
python采用getopt解析命令行输入参数实例
2014/09/30 Python
在Python中实现贪婪排名算法的教程
2015/04/17 Python
python使用multiprocessing模块实现带回调函数的异步调用方法
2015/04/18 Python
tensorflow实现对图片的读取的示例代码
2018/02/12 Python
Python模拟登录之滑块验证码的破解(实例代码)
2019/11/18 Python
Ubuntu16.04安装python3.6.5步骤详解
2020/01/10 Python
TensorFlow实现打印每一层的输出
2020/01/21 Python
Pycharm 安装 idea VIM插件的图文教程详解
2020/02/21 Python
python实现图像全景拼接
2020/03/27 Python
用Python 爬取猫眼电影数据分析《无名之辈》
2020/07/24 Python
关于pycharm 切换 python3.9 报错 ‘HTMLParser‘ object has no attribute ‘unescape‘ 的问题
2020/11/24 Python
使用Python制作一个数据预处理小工具(多种操作一键完成)
2021/02/07 Python
详解html5页面 rem 布局适配方法
2018/01/12 HTML / CSS
AmazeUI 单选框和多选框的实现示例
2020/08/18 HTML / CSS
Reformation官网:美国女装品牌
2018/09/14 全球购物
伦敦香水公司:The London Perfume Company
2019/11/13 全球购物
2015年挂职干部工作总结
2015/05/14 职场文书
文艺晚会开场白
2015/05/29 职场文书
傲慢与偏见读书笔记
2015/06/29 职场文书
攻略丨滑雪究竟该选哪款对讲机?
2022/02/18 无线电