[原创]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 相关文章推荐
漂亮的仿flash菜单,来自蓝色经典
Jun 26 Javascript
文本框的字数限制功能jquery插件
Nov 24 Javascript
this和执行上下文实现代码
Jul 01 Javascript
JS数学函数Exp使用说明
Aug 09 Javascript
JavaScript代码里的判断小结
Aug 22 Javascript
Angularjs使用指令做表单校验的方法
Mar 31 Javascript
jquery实现简单实用的轮播器
May 23 jQuery
js浏览器滚动条卷去的高度scrolltop(实例讲解)
Jul 07 Javascript
jQuery Validate插件ajax方式验证输入值的实例
Dec 21 jQuery
教你如何编写Vue.js的单元测试的方法
Oct 17 Javascript
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
Aug 23 Javascript
vue实现的多页面项目如何优化打包的步骤详解
Jul 19 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
GD输出汉字的函数的分析
2006/10/09 PHP
php数组添加与删除单元的常用函数实例分析
2015/02/16 PHP
PHP 中TP5 Request 请求对象的实例详解
2017/07/31 PHP
Prototype使用指南之string.js
2007/01/10 Javascript
jQuery ui 1.7更新小结
2009/08/15 Javascript
jQuery 页面 Mask实现代码
2010/01/09 Javascript
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
2010/06/19 Javascript
通过jquery的$.getJSON做一个跨域ajax请求试验
2011/05/03 Javascript
jquery的attr方法禁用表单元素禁用输入内容
2014/06/23 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
2015/04/17 Javascript
javascript显式类型转换实例分析
2015/04/25 Javascript
jsTree使用记录实例
2016/12/01 Javascript
JS实现含有中文字符串的友好截取功能分析
2017/03/13 Javascript
Bootstrap免费字体和图标网站(值得收藏)
2017/03/16 Javascript
nodejs个人博客开发第四步 数据模型
2017/04/12 NodeJs
AjaxUpLoad.js实现文件上传
2018/03/05 Javascript
JS实现中英文混合文字溢出友好截取功能
2018/08/06 Javascript
python实现在每个独立进程中运行一个函数的方法
2015/04/23 Python
在Python中操作字典之fromkeys()方法的使用
2015/05/21 Python
Python 功能和特点(新手必学)
2015/12/30 Python
Python模拟登陆淘宝并统计淘宝消费情况的代码实例分享
2016/07/04 Python
TensorFlow 模型载入方法汇总(小结)
2018/06/19 Python
python实现静态服务器
2019/09/05 Python
翻转数列python实现,求前n项和,并能输出整个数列的案例
2020/05/03 Python
Django实现内容缓存实例方法
2020/06/30 Python
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
2020/06/01 HTML / CSS
纯HTML5+CSS3制作生日蛋糕(代码易懂)
2016/11/16 HTML / CSS
英国排名第一的在线宠物用品商店:Monster Pet Supplies
2018/05/20 全球购物
澳大利亚领先的女性运动服品牌:Lorna Jane
2020/06/19 全球购物
致800米运动员广播稿
2014/02/16 职场文书
《充气雨衣》教学反思
2014/04/07 职场文书
优秀大学生自荐信
2014/06/09 职场文书
2014年度党员自我评议
2014/09/13 职场文书
元旦标语大全
2014/10/09 职场文书
学习与创新自我评价
2015/03/09 职场文书
2015年青年教师工作总结
2015/05/25 职场文书