[原创]Javascript 实现广告后加载 可加载百度谷歌联盟广告


Posted in Javascript onMay 11, 2016

本文主要介绍一种新的广告后加载的方式,支持自定义HTML广告、百度联盟广告和谷歌联盟广告。这种方式在页面加载完成后执行,不影响内容的显示,对用户更加友好。

我们在网站上放置广告,最简单的方法就是把JS代码,插入指定的位置,这样带了后果就是,页面按照顺序加载,偶尔一条广告代码卡住,整个页面都会卡住,给用户带来的体验是极差的。

那么怎么解决这种问题呢?先说一下原理,在我们的页面上先预留一些占位符,为了不影响页面内容的加载,我们在页面的底部引入JS处理,逐个把占位符替换成相应的广告。

下面我们看具体的实现步骤:

一、在页面上放置占位符,其实就是一个span标记

<span id="ads_one" class="jbTestPos"></span>

<span id="ads_two" class="jbTestPos"></span>

<span id="ads_three" class="jbTestPos"></span>

二、编写独立的JS脚本代码:jbLoader.js

jbMap = window.jbMap || {};

function jbViaJs(locationId) {

    var _f = undefined;

    var _fconv = 'jbMap[\"' + locationId + '\"]';

    try {

        _f = eval(_fconv);

        if (_f != undefined) {

            _f()

        }

    } catch(e) {}

}

function jbLoader(closetag) {

    var jbTest = null,

    jbTestPos = document.getElementsByTagName("span");

    for (var i = 0; i < jbTestPos.length; i++) {

        if (jbTestPos[i].className == "jbTestPos") {

            jbTest = jbTestPos[i];

            break

        }

    }

    if (jbTest == null) return;

    if (!closetag) {

        document.write("<span id=jbTestPos_" + jbTest.id + " style=display:none>");

        jbViaJs(jbTest.id);

        return

    }

    document.write("</span>");

    var real = document.getElementById("jbTestPos_" + jbTest.id);

    for (var i = 0; i < real.childNodes.length; i++) {

        var node = real.childNodes[i];

        if (node.tagName == "SCRIPT" && /closetag/.test(node.className)) continue;

        jbTest.parentNode.insertBefore(node, jbTest);

        i--

    }

    jbTest.parentNode.removeChild(jbTest);

    real.parentNode.removeChild(real)

}

 

jbMap['ads_one'] = function() {

 document.writeln('<a href="https://3water.com/" target="_blank">三水点靠木</a>');

};

 

jbMap['ads_two'] = function() {

 document.writeln('<scr'+'ipt type="text/javascript">var cpro_id = "u336546";</script><script src="http://cpro.baidustatic.com/cpro/ui/c.js" type="text/javascript"></scr'+'ipt>');

};

 

jbMap['ads_three'] = function() {

 document.writeln('<scri'+'pt async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></scri'+'pt><ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-1247620132145618" data-ad-slot="2253650178" data-override-format="true" data-page-url="https://3water.com"></ins><scri'+'pt>(adsbygoogle = window.adsbygoogle || []).push({});</s'+'cript>');

};

注意:jbMap是放置广告的数组,数组的Key和Span标记的ID是对应的,我们可以在这个JS中按照这种形式添加自己的广告。这种广告加载方式,支持自定义的HTML广告、百度联盟广告、谷歌联盟广告,这里都给大家做了演示。

三、在页面底部中引入JS,调用jbLoader加载广告

<script type="text/javascript" src='js/jbLoader.js'></script>

<script>jbLoader();</script><script class="closetag">jbLoader(true);</script>

<script>jbLoader();</script><script class="closetag">jbLoader(true);</script>

<script>jbLoader();</script><script class="closetag">jbLoader(true);</script>

注意:格式必须是如上这种格式,有几个占位符,就添加几个<script>jbLoader();</script><script class="closetag">jbLoader(true);</script>

不要问小编为什么要这样调用,其实小编也研究了一下:
1.第一次jbLoader()是为了写标记,第二次jbLoader(true)是为了替换标记。
2.用两个<script>是为了第二次调用能取到相应的元素。
3.有几个占位符就写几行script是为了互不影响,各显示各的。

总之:好多大网站都在使用这种方法,大家放心用好了。至此,就完成了页面广告后加载的调用。

Javascript 相关文章推荐
JQuery 学习笔记01 JQuery初接触
May 06 Javascript
突发奇想的一个jquery插件
Nov 19 Javascript
jQuery实现的仿select功能代码
Aug 19 Javascript
JavaScript中的冒泡排序法
Aug 03 Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
Jan 12 Javascript
彻底弄懂 JavaScript 执行机制
Oct 23 Javascript
jQuery pagination分页示例详解
Oct 23 jQuery
详解auto-vue-file:一个自动创建vue组件的包
Apr 26 Javascript
vue使用localStorage保存登录信息 适用于移动端、PC端
May 27 Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
Jun 24 Javascript
JavaScript中变量提升机制示例详解
Dec 27 Javascript
js里面的变量范围分享
Jul 18 Javascript
Extjs4.0 ComboBox如何实现三级联动
May 11 #Javascript
javascript简单判断输入内容是否合法的方法
May 11 #Javascript
解析JavaScript面向对象概念中的Object类型与作用域
May 10 #Javascript
JavaScript根据CSS的Media Queries来判断浏览设备的方法
May 10 #Javascript
JavaScript中的原型prototype完全解析
May 10 #Javascript
简单解析JavaScript中的__proto__属性
May 10 #Javascript
Web Uploader文件上传插件使用详解
May 10 #Javascript
You might like
PHP6 先修班 JSON实例代码
2008/08/23 PHP
php设计模式之命令模式的应用详解
2013/05/21 PHP
基于PHP+jQuery+MySql实现红蓝(顶踩)投票代码
2015/08/25 PHP
PHP面向对象程序设计组合模式与装饰模式详解
2016/12/02 PHP
PHP实现执行外部程序的方法详解
2017/08/17 PHP
PHP7引入的&quot;??&quot;和&quot;?:&quot;的区别讲解
2019/04/08 PHP
提高代码性能技巧谈—以创建千行表格为例
2006/07/01 Javascript
js AspxButton的客户端操作
2009/06/26 Javascript
jquery validation插件表单验证的一个例子
2010/03/03 Javascript
jquery zTree异步加载简单实例分享
2013/02/05 Javascript
当自定义数据属性为json格式字符串时jQuery的data api问题探讨
2013/02/18 Javascript
JS通过相同的name进行表格求和代码
2013/08/18 Javascript
js 通过cookie实现刷新不变化树形菜单
2014/10/30 Javascript
浅谈Javascript如何实现匀速运动
2014/12/19 Javascript
JavaScript中的值类型转换介绍
2014/12/31 Javascript
JavaScript实现数字数组按照倒序排列的方法
2015/04/06 Javascript
Javascript实现鼠标右键特色菜单
2015/08/04 Javascript
JavaScript中省略元素对数组长度的影响
2016/10/26 Javascript
javaScript语法总结
2016/11/25 Javascript
NodeJS、NPM安装配置步骤(windows版本) 以及环境变量详解
2017/05/13 NodeJs
nodeJS微信分享
2017/12/20 NodeJs
ES6 对象的新功能与解构赋值介绍
2019/02/05 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
2019/08/14 Javascript
[50:27]OG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26
2018/08/30 DOTA
Python 将RGB图像转换为Pytho灰度图像的实例
2017/11/14 Python
如何利用python查找电脑文件
2018/04/27 Python
python3 pathlib库Path类方法总结
2019/12/26 Python
完美解决keras 读取多个hdf5文件进行训练的问题
2020/07/01 Python
财务管理专业推荐信
2013/11/19 职场文书
秘书英文求职信范文
2014/01/31 职场文书
单位委托书范本
2014/04/04 职场文书
借款协议书
2014/09/16 职场文书
电影建党伟业观后感
2015/06/01 职场文书
投诉信范文
2015/07/02 职场文书
六年级作文之预言作文
2019/10/25 职场文书
ipad隐藏软件app图标方法
2022/04/19 数码科技