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 相关文章推荐
用JQuery 判断某个属性是否存在hasAttr的解决方法
Apr 26 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
Oct 17 Javascript
JQuery替换DOM节点的方法
Jun 11 Javascript
jquery京东商城双11焦点图多图广告特效代码分享
Sep 06 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
May 21 Javascript
javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)
Oct 27 Javascript
jQuery-mobile事件监听与用法详解
Nov 23 Javascript
JavaScript编写九九乘法表(两种任选)
Feb 04 Javascript
vue-router实现tab标签页(单页面)详解
Oct 17 Javascript
Vue下的国际化处理方法
Dec 18 Javascript
Vue通过ref父子组件拿值方法
Sep 12 Javascript
详解Webpack4多页应用打包方案
Jul 16 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缓存设计实现代码
2011/09/30 PHP
浅谈PHP中的Trait使用方法
2019/03/22 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
初窥JQuery-Jquery简介 入门了解篇
2010/11/25 Javascript
JS实现QQ图片一闪一闪的效果小例子
2013/07/31 Javascript
JavaScript关闭当前页面(窗口)不带任何提示
2014/03/26 Javascript
jQuery中[attribute!=value]选择器用法实例
2014/12/31 Javascript
JS实现自动变化的导航菜单效果代码
2015/09/09 Javascript
jquery mobile开发常见问题分析
2016/01/21 Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
2016/01/26 Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
2016/05/26 Javascript
js 连续赋值的简单实现
2016/06/13 Javascript
Javascript中的对象和原型(二)
2016/08/12 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
2016/11/29 Javascript
VsCode新建VueJs项目的详细步骤
2017/09/23 Javascript
微信小程序云开发如何使用npm安装依赖
2019/05/18 Javascript
Vue 页面权限控制和登陆验证功能的实例代码
2019/06/20 Javascript
三分钟教你用Node做一个微信哄女友(基友)神器(面向小白)
2019/06/21 Javascript
layer弹出层自适应高度,垂直水平居中的实现
2019/09/16 Javascript
react MPA 多页配置详解
2019/10/18 Javascript
vue 动态给每个页面添加title、关键词和描述的方法
2020/08/28 Javascript
[03:43]TI9战队采访——PSG.LGD
2019/08/22 DOTA
python如何求解两数的最大公约数
2018/09/27 Python
linux中如何使用python3获取ip地址
2019/07/15 Python
使用Pyinstaller转换.py文件为.exe可执行程序过程详解
2019/08/06 Python
Python socket非阻塞模块应用示例
2019/09/12 Python
python实现图片上添加图片
2019/11/26 Python
Python代码需要缩进吗
2020/07/01 Python
pandas按照列的值排序(某一列或者多列)
2020/12/13 Python
迪卡侬英国官网:Decathlon英国
2017/04/08 全球购物
Under Armour瑞典官方网站:美国高端运动科技品牌
2018/11/21 全球购物
Ellesse英国官网:意大利高级运动品牌
2019/07/23 全球购物
《桂花雨》教学反思
2014/04/12 职场文书
国情备忘录观后感
2015/06/04 职场文书
张思德观后感
2015/06/09 职场文书
失恋33天观后感
2015/06/11 职场文书