[原创]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 相关文章推荐
JavaScript中最简洁的编码html字符串的方法
Oct 11 Javascript
javascript操作字符串的原生方法
Dec 22 Javascript
javascript实现tab响应式切换特效
Jan 29 Javascript
Js的Array数组对象详解
Feb 22 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
May 12 Javascript
JS全局变量和局部变量最新解析
Jun 24 Javascript
Angular使用ng-messages与PHP进行表单数据验证
Dec 28 Javascript
vue.js利用Object.defineProperty实现双向绑定
Mar 09 Javascript
js自定义瀑布流布局插件
May 16 Javascript
如何基于原生javaScript生成带图片的二维码
Nov 21 Javascript
JS实现瀑布流效果
Mar 07 Javascript
bootstrap-table后端分页功能完整实例
Jun 01 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
MySQL授权问题总结
2007/05/06 PHP
php截取utf-8中文字符串乱码的解决方法
2010/03/29 PHP
php下关于Cannot use a scalar value as an array的解决办法
2010/08/08 PHP
PHP类与对象中的private访问控制的疑问
2012/11/01 PHP
thinkphp中连接oracle时封装方法无法用的解决办法
2013/06/17 PHP
php-fpm重启导致的程序执行中断问题详解
2019/04/29 PHP
javascript String 对象
2008/04/25 Javascript
JavaScript 字符串连接性能优化
2008/12/20 Javascript
TextArea 控件的最大长度问题(js json)
2009/12/16 Javascript
详细解密jsonp跨域请求
2015/04/15 Javascript
纯JavaScript基于notie.js插件实现消息提示特效
2016/01/18 Javascript
js实现的页面矩阵图形变换特效
2016/01/26 Javascript
JS封装的选项卡TAB切换效果示例
2016/09/20 Javascript
JavaScript对象引用与赋值实例详解
2017/03/15 Javascript
AngularJs 最新验证手机号码的实例,成功测试通过
2017/11/26 Javascript
微信小程序block的使用教程
2018/04/01 Javascript
[05:22]DOTA2 2015国际邀请赛中国区预选赛首日TOP10
2015/05/26 DOTA
详谈Numpy中数组重塑、合并与拆分方法
2018/04/17 Python
解决pip install的时候报错timed out的问题
2018/06/12 Python
python定向爬虫校园论坛帖子信息
2018/07/23 Python
python3基于TCP实现CS架构文件传输
2018/07/28 Python
基于python进行抽样分布描述及实践详解
2019/09/02 Python
PyQt5.6+pycharm配置以及pyinstaller生成exe(小白教程)
2020/06/02 Python
css3边框_动力节点Java学院整理
2017/07/11 HTML / CSS
暇步士官网:Hush Puppies
2016/09/22 全球购物
北美领先的牛仔品牌:Buffalo David Bitton
2017/05/22 全球购物
美国益智玩具购物网站:Fat Brain Toys
2017/11/03 全球购物
Toppik顶丰增发纤维官网:解决头发稀疏
2017/12/30 全球购物
来自Ocado的宠物商店:Fetch
2018/07/10 全球购物
让生命充满爱演讲稿
2014/05/10 职场文书
作风大整顿心得体会
2014/09/10 职场文书
母亲节感言
2015/08/03 职场文书
四年级作文之说明文作文
2019/10/14 职场文书
python调试工具Birdseye的使用教程
2021/05/25 Python
刚学完怎么用Python实现定时任务,转头就跑去撩妹!
2021/06/05 Python
Python实现位图分割的效果
2021/11/20 Python