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 继承详解(四)
Jul 13 Javascript
javascript中自定义对象的属性方法分享
Jul 12 Javascript
JavaScript中prototype为对象添加属性的误区介绍
Oct 15 Javascript
使用jQuery实现的掷色子游戏动画效果
Mar 14 Javascript
js显示当前日期时间和星期几
Oct 22 Javascript
jQuery实现简单的图片查看器
Sep 11 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
Mar 24 Javascript
JS获取地址栏参数的两种方法(简单实用)
Jun 14 Javascript
Vue.directive 自定义指令的问题小结
Mar 04 Javascript
vue中上传视频或图片或图片和文字一起到后端的解决方法
Dec 01 Javascript
小程序实现点击tab切换左右滑动
Nov 16 Javascript
Vue 的 v-model用法实例
Nov 23 Vue.js
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个人网站架设连环讲(一)
2006/10/09 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
动态加载js的几种方法
2006/10/23 Javascript
jQuery 自动增长的文本输入框实现代码
2010/04/02 Javascript
javascript设计模式 接口介绍
2012/07/24 Javascript
热点新闻滚动特效的js代码
2013/08/17 Javascript
js的flv视频播放器插件使用方法
2015/06/23 Javascript
Node.js的Express框架使用上手指南
2016/03/12 Javascript
javascript 玩转Date对象(实例讲解)
2017/07/11 Javascript
AngularJs 延时器、计时器实例代码
2017/09/16 Javascript
js判断传入时间和当前时间大小实例(超简单)
2018/01/11 Javascript
JavaScript实现计算多边形质心的方法示例
2018/01/31 Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
2018/02/11 Javascript
vueJs实现DOM加载完之后自动下拉到底部的实例代码
2018/08/31 Javascript
JavaScript面试技巧之数组的一些不low操作
2019/03/22 Javascript
Angular8路由守卫原理和使用方法
2019/08/29 Javascript
vue-cli2与vue-cli3在一台电脑共存的实现方法
2019/09/25 Javascript
JS深入学习之数组对象排序操作示例
2020/05/01 Javascript
js实现简单抽奖功能
2020/11/24 Javascript
python局域网ip扫描示例分享
2014/04/03 Python
Python中获取对象信息的方法
2015/04/27 Python
Python 3.x读写csv文件中数字的方法示例
2017/08/29 Python
Python DataFrame 设置输出不显示index(索引)值的方法
2018/06/07 Python
Django Rest framework权限的详细用法
2019/07/25 Python
解决python有时候import不了当前的包问题
2019/08/28 Python
Python 音频生成器的实现示例
2019/12/24 Python
利用python 下载bilibili视频
2020/11/13 Python
Oakley官网:运动太阳镜、雪镜和服装
2016/09/30 全球购物
Madewell澳大利亚官方网站:美国休闲服饰品牌
2019/07/18 全球购物
Yankee Candle官网:美国最畅销蜡烛品牌之一
2020/01/05 全球购物
学生会竞选演讲稿
2014/04/24 职场文书
房屋买卖委托书格式范本格式
2014/10/13 职场文书
护士求职简历自我评价
2015/03/10 职场文书
统计员岗位职责范本
2015/04/14 职场文书
中学生勤俭节约倡议书
2015/04/29 职场文书
2016年“我们的节日·重阳节”主题活动总结
2016/04/01 职场文书