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创建一个input数组并绑定click事件的方法
Jun 12 Javascript
IE浏览器不支持getElementsByClassName的解决方法
Aug 27 Javascript
JavaScript移除数组内重复元素的方法
Mar 18 Javascript
JavaScript的jQuery库插件的简要开发指南
Aug 12 Javascript
深入理解Angularjs中的$resource服务
Dec 31 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
May 10 Javascript
vue 每次渲染完页面后div的滚动条保持在最底部的方法
Mar 17 Javascript
基于JS实现带动画效果的流程进度条
Jun 01 Javascript
layerUI下的绑定事件实例代码
Aug 17 Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
May 28 Javascript
详解如何使用koa实现socket.io官网的例子
Nov 04 Javascript
Vue Element-ui表单校验规则实现
Jul 09 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
ajax取消挂起请求的处理方法
2013/03/18 PHP
PHP curl实现抓取302跳转后页面的示例
2014/07/04 PHP
PHP读取XML格式文件的方法总结
2017/02/27 PHP
Laravel中服务提供者和门面模式的入门介绍
2017/11/06 PHP
php实现二叉树中和为某一值的路径方法
2018/10/14 PHP
基于jquery的jqDnR拖拽溢出的修改
2011/02/12 Javascript
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
2012/03/01 Javascript
jQuery+css实现图片滚动效果(附源码)
2013/03/18 Javascript
js实现简单的星级选择器提交效果适用于评论等
2013/10/18 Javascript
Bootstrap基本插件学习笔记之折叠(22)
2016/12/08 Javascript
angularjs+bootstrap菜单的使用示例代码
2017/03/07 Javascript
详解vue的数据binding绑定原理
2017/04/12 Javascript
vue中component组件的props使用详解
2017/09/04 Javascript
jQuery实现注册会员时密码强度提示信息功能示例
2017/09/05 jQuery
详解webpack与SPA实践之开发环境搭建
2017/12/18 Javascript
AngularJs点击状态值改变背景色的实例
2017/12/18 Javascript
关于express与koa的使用对比详解
2018/01/25 Javascript
vue.js 微信支付前端代码分享
2018/02/10 Javascript
JS数组求和的常用方法总结【5种方法】
2019/01/14 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
2019/05/06 Javascript
关于vue.js中实现方法内某些代码延时执行
2019/11/14 Javascript
[54:58]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第一场 11.25
2020/11/25 DOTA
python如何将两个txt文件内容合并
2019/10/18 Python
解决torch.autograd.backward中的参数问题
2020/01/07 Python
在Python IDLE 下调用anaconda中的库教程
2020/03/09 Python
Keras保存模型并载入模型继续训练的实现
2021/02/20 Python
国外最大的眼镜网站:Coastal
2017/08/09 全球购物
Gap加拿大官网:Gap Canada
2017/08/24 全球购物
什么是.net
2015/08/03 面试题
天网面试题
2013/04/07 面试题
营销与策划应届生求职信
2013/11/04 职场文书
文秘自荐信
2014/06/28 职场文书
英语辞职信怎么写
2015/02/28 职场文书
政协委员个人总结
2015/03/03 职场文书
工作简历自我评价
2015/03/11 职场文书
GPU服务器的多用户配置方法
2022/07/07 Servers