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 相关文章推荐
[Web]防止用户复制页面内容和另存页面的方法
Feb 06 Javascript
javascript web对话框与弹出窗口
Feb 22 Javascript
js闭包的用途详解
Nov 09 Javascript
封装好的一个万能检测表单的方法
Jan 21 Javascript
Javascript通过overflow控制列表闭合与展开的方法
May 15 Javascript
jQuery通过deferred对象管理ajax异步
May 20 Javascript
jQuery插件uploadify实现ajax效果的图片上传
Jun 18 Javascript
深入理解(function(){... })();
Aug 16 Javascript
Angular.Js的自动化测试详解
Dec 09 Javascript
JavaScript 实现 Tab 点击切换实例代码
Mar 25 Javascript
浅谈react+es6+webpack的基础配置
Aug 09 Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
Mar 12 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
thinkphp特殊标签用法概述
2014/11/24 PHP
php结合curl实现多线程抓取
2015/07/09 PHP
PHP mysqli_free_result()与mysqli_fetch_array()函数详解
2016/09/21 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
php从数据库中获取数据用ajax传送到前台的方法
2018/08/20 PHP
PhpStorm2020.1 安装 debug - Postman 调用的详细教程
2020/08/17 PHP
Javascript实现的分页函数
2006/12/22 Javascript
js中复制行和删除行的操作实例
2013/06/25 Javascript
node.js WEB开发中图片验证码的实现方法
2014/06/03 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
2014/12/09 Javascript
js中匿名函数的创建与调用方法分析
2014/12/19 Javascript
js制作带有遮罩弹出层实现登录注册表单特效代码分享
2015/09/05 Javascript
jQuery获得字体颜色16位码的方法
2016/02/20 Javascript
JS获取url参数、主域名的方法实例分析
2016/08/03 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
2016/12/23 Javascript
微信小程序 页面之间传参实例详解
2017/01/13 Javascript
Mac中安装nvm的教程分享
2017/12/11 Javascript
浅谈vue项目优化之页面的按需加载(vue+webpack)
2017/12/11 Javascript
vue中的计算属性实例详解
2018/09/19 Javascript
微信小程序如何调用json数据接口并解析
2019/06/29 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
2019/11/26 Javascript
vue 对axios get pust put delete封装的实例代码
2020/01/05 Javascript
解决Echarts2竖直datazoom滑动后显示数据不全的问题
2020/07/20 Javascript
vue中使用echarts的示例
2021/01/03 Vue.js
python 采集中文乱码问题的完美解决方法
2016/09/27 Python
Python制作词云的方法
2018/01/03 Python
python编写简易聊天室实现局域网内聊天功能
2018/07/28 Python
python创建文件时去掉非法字符的方法
2018/10/31 Python
python读取图片任意范围区域
2019/01/23 Python
英国信箱在线鲜花速递公司:Bloom & Wild
2019/03/10 全球购物
Skyscanner新西兰:全球领先的旅游搜索网站
2019/08/26 全球购物
西北政法大学自主招生自荐信
2014/01/29 职场文书
公司节能减排方案
2014/05/16 职场文书
2014年最新离婚协议书范本
2014/10/11 职场文书
CSS中em的正确打开方式详解
2021/04/08 HTML / CSS
Spring整合Mybatis的全过程
2021/06/28 Java/Android