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 数组的 uniq 方法
Jan 23 Javascript
JS 动态加载脚本的4种方法
May 05 Javascript
瀑布流布局并自动加载实现代码
Mar 12 Javascript
jquery对dom的操作常用方法整理
Jun 25 Javascript
使用Plupload实现直接上传附件至七牛云存储
Dec 26 Javascript
百度地图自定义控件分享
Mar 04 Javascript
AngularJs Understanding the Model Component
Sep 02 Javascript
web 屏蔽BackSpace键实例代码
Dec 24 Javascript
Angular 4依赖注入学习教程之InjectToken的使用(八)
Jun 04 Javascript
JavaScript学习笔记之基于定时器实现图片无缝滚动功能详解
Jan 09 Javascript
Vue使用自定义指令实现拖拽行为实例分析
Jun 06 Javascript
解决vue-router的beforeRouteUpdate不能触发
Apr 14 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中文URL编解码(urlencode()rawurlencode()
2010/07/03 PHP
php获取数组中重复数据的两种方法
2013/06/28 PHP
PHP封装的HttpClient类用法实例
2015/06/17 PHP
PHP模板引擎Smarty内建函数详解
2016/04/11 PHP
关于Laravel Route重定向的一个注意点
2017/01/16 PHP
PHP的mysqli_select_db()函数讲解
2019/01/23 PHP
jquery中eq和get的区别与使用方法
2011/04/14 Javascript
js通过googleAIP翻译PHP系统的语言配置的实现代码
2011/10/17 Javascript
基于jquery的图片幻灯展示源码
2012/07/15 Javascript
js substr支持中文截取函数代码(中文是双字节)
2013/04/17 Javascript
一个简单的瀑布流效果(主体形式自写)
2013/05/27 Javascript
jQuery实现防止提交按钮被双击的方法
2015/03/24 Javascript
JS实现统计复选框选中个数并提示确定与取消的方法
2015/07/01 Javascript
javascript获取wx.config内部字段解决微信分享
2016/03/09 Javascript
全面理解JavaScript中的闭包
2016/05/12 Javascript
jQuery插件jqGrid动态获取列和列字段的方法
2017/03/03 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
2017/07/21 Javascript
微信小程序wx.request实现后台数据交互功能分析
2017/11/25 Javascript
js实现input密码框显示/隐藏功能
2020/09/10 Javascript
35个最好用的Vue开源库(史上最全)
2019/01/03 Javascript
vue项目强制清除页面缓存的例子
2019/11/06 Javascript
vue2.0 解决抽取公用js的问题
2020/07/31 Javascript
Python语言的12个基础知识点小结
2014/07/10 Python
Python 列表的清空方式
2020/01/13 Python
AmazeUI中各种的导航式菜单与解决方法
2020/08/19 HTML / CSS
创联软件面试题笔试题
2012/10/07 面试题
大学生预备党员自我评价分享
2013/11/16 职场文书
工作评语大全
2014/04/26 职场文书
大学生党员个人对照检查材料范文
2014/09/25 职场文书
税务干部个人整改措施思想汇报
2014/10/10 职场文书
现实表现证明材料
2015/06/19 职场文书
七年级写作指导之游记作文
2019/10/07 职场文书
深入探讨opencv图像矫正算法实战
2021/05/21 Python
Mybatis-Plus 使用 @TableField 自动填充日期
2022/04/26 Java/Android
利用Apache Common将java对象池化的问题
2022/06/16 Servers
详解SQL报错盲注
2022/07/23 SQL Server