javascript 广告后加载,加载完页面再加载广告

 更新时间:2010年11月25日 21:51:37   投稿:mdxy-dxy  
网页打开的顺序都是按页面从上到下的顺序加载完成的,所以要想使广告不影响页面打开速度,就要等页面全部打开完成后,再加载JS代码。

先加载完页面再加载广告的原理:

网页打开的顺序都是按页面从上到下的顺序加载完成的,所以要想使广告不影响页面打开速度,就要等页面全部打开完成后,再加载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基础语法之词法结构

    javascript是一门简单的语言,也是一门复杂的语言。这篇文章主要介绍了温习Javascript基础语法之词法结构的相关资料,需要的朋友可以参考下
    2016-05-05
  • 从表单校验看JavaScript策略模式的使用详解

    从表单校验看JavaScript策略模式的使用详解

    这篇文章主要介绍了从表单校验看JavaScript策略模式的使用,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-10-10
  • uniapp基础篇之上传图片的实战步骤

    uniapp基础篇之上传图片的实战步骤

    应用uni-app开发跨平台App项目时,上传图片、文档等资源功能需求十分常见,下面这篇文章主要给大家介绍了关于uniapp基础篇之上传图片的相关资料,需要的朋友可以参考下
    2022-12-12
  • 浅谈javascript中的事件冒泡和事件捕获

    浅谈javascript中的事件冒泡和事件捕获

    本文主要介绍了javascript中的事件冒泡和事件捕获,具有一定的参考价值,下面跟着小编一起来看下吧
    2016-12-12
  • echarts实现雷达图的详细步骤

    echarts实现雷达图的详细步骤

    这篇文章主要给大家介绍了关于echarts实现雷达图的详细步骤,雷达图(Radar Chart)是一种信息丰富的可视化工具,其中多个变量(三个或更多)在二维平面上进行比较,文中给出了完整的代码示例,需要的朋友可以参考下
    2024-01-01
  • three.js如何实现3D动态文字效果

    three.js如何实现3D动态文字效果

    这篇文章主要给大家介绍了关于three.js如何实现3D动态文字效果的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • 使用javascript实现简单的选项卡切换

    使用javascript实现简单的选项卡切换

    本文主要介绍了使用javascript实现简单的选项卡切换的效果,代码非常的简单,兼容性十分棒,这里推荐给小伙伴们。
    2015-01-01
  • javascript实现可改变滚动方向的无缝滚动实例

    javascript实现可改变滚动方向的无缝滚动实例

    无缝滚动在制作一些图片展示的时候还是蛮有用的,下面与大家分享下javascript实现的可改变滚动方向的无缝滚动,具体实现如下,感兴趣的朋友可以参考下哈
    2013-06-06
  • bootstrap轮播图示例代码分享

    bootstrap轮播图示例代码分享

    这篇文章主要为大家详细介绍了bootstrap轮播图示例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • JavaScript构建自己的模板小引擎示例

    JavaScript构建自己的模板小引擎示例

    这篇文章主要介绍了JavaScript构建自己的模板小引擎,结合实例形式分析了javascript自定义模板引擎的实现与使用方法,需要的朋友可以参考下
    2018-12-12

最新评论