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 相关文章推荐
ext读取两种结构的xml的代码
Nov 05 Javascript
javascript移出节点removeChild()使用介绍
Apr 03 Javascript
使用AngularJS处理单选框和复选框的简单方法
Jun 19 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
Dec 08 Javascript
详解PHP中pathinfo()函数导致的安全问题
Jan 05 Javascript
js实现京东轮播图效果
Jun 30 Javascript
关于定制FileField中的上传文件名称问题
Aug 22 Javascript
Vue-cli项目获取本地json文件数据的实例
Mar 07 Javascript
Node.js应用设置安全的沙箱环境
Apr 23 Javascript
详解element-ui日期时间选择器的日期格式化问题
Apr 08 Javascript
nuxt.js写项目时增加错误提示页面操作
Nov 05 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 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的开发框架的现状和展望
2007/03/16 PHP
php实现字符串翻转的方法
2015/03/27 PHP
详解PHP的Yii框架中的Controller控制器
2016/03/29 PHP
PHP四种排序算法实现及效率分析【冒泡排序,插入排序,选择排序和快速排序】
2018/04/27 PHP
flash 得到自身url参数的代码
2009/11/15 Javascript
JQuery 常用方法和事件详细介绍
2013/04/18 Javascript
无刷新预览所选择的图片示例代码
2014/04/02 Javascript
jQuery过滤选择器:not()方法使用介绍
2014/04/20 Javascript
Javascript中设置默认参数值示例
2014/09/11 Javascript
Node.js开源应用框架HapiJS介绍
2015/01/14 Javascript
JavaScript里四舍五入函数round用法实例
2015/04/06 Javascript
jQuery实现列表内容的动态载入特效
2015/08/08 Javascript
javascript 动态修改css样式方法汇总(四种方法)
2015/08/27 Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
2017/06/29 Javascript
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
2017/11/10 jQuery
JS实现不用中间变量temp 实现两个变量值得交换方法
2018/02/04 Javascript
Webpack的dll功能使用
2018/06/28 Javascript
实例分析编写vue组件方法
2019/02/12 Javascript
Ant Design的可编辑Tree的实现操作
2020/10/31 Javascript
Python中逗号的三种作用实例分析
2015/06/08 Python
python中urllib.unquote乱码的原因与解决方法
2017/04/24 Python
Python 实现取矩阵的部分列,保存为一个新的矩阵方法
2018/11/14 Python
Python企业编码生成系统总体系统设计概述
2019/07/26 Python
Django接收照片储存文件的实例代码
2020/03/07 Python
使用python从三个角度解决josephus问题的方法
2020/03/27 Python
Python新手学习函数默认参数设置
2020/06/03 Python
以实惠的价格轻松租车,免费取消:Easyrentcars
2019/07/16 全球购物
酒店门卫岗位职责
2013/12/29 职场文书
读群众路线心得体会
2014/03/07 职场文书
《春到梅花山》教学反思
2014/04/16 职场文书
市场营销专业应届生自荐信
2014/06/19 职场文书
小学爱国卫生月活动总结
2014/06/30 职场文书
2014办公室年度工作总结
2014/12/09 职场文书
现货白银电话营销话术
2015/05/29 职场文书
《猴王出世》教学反思
2016/02/23 职场文书
SQLServer 日期函数大全(小结)
2021/04/08 SQL Server