[原创]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 相关文章推荐
如何判断图片地址是否失效
Feb 02 Javascript
JS 实现完美include载入实现代码
Aug 05 Javascript
jquery判断元素的子元素是否存在的示例代码
Feb 04 Javascript
javascript页面渲染速度测试脚本分享
Apr 15 Javascript
轻松掌握JavaScript中的Math object数学对象
May 26 Javascript
IntelliJ IDEA 安装vue开发插件的方法
Nov 21 Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
Mar 09 Javascript
浅谈微信页面入口文件被缓存解决方案
Sep 29 Javascript
vue缓存的keepalive页面刷新数据的方法
Apr 23 Javascript
微信小程序收货地址API兼容低版本解决方法
May 18 Javascript
javascript创建元素和删除元素实例小结
Jun 19 Javascript
Vuejs中的watch实例详解(监听者)
Jan 05 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
使用PHP接收POST数据,解析json数据
2013/06/28 PHP
PHP反射使用实例和PHP反射API的中文说明
2014/07/02 PHP
php实现可用于mysql,mssql,pg数据库操作类
2014/12/13 PHP
php基于PDO连接MSSQL示例DEMO
2016/07/13 PHP
PJ Blog修改-禁止复制的代码和方法
2006/10/25 Javascript
我也种棵OO树JXTree[js+css+xml]
2007/04/02 Javascript
jQuery 常见开发使用技巧总结
2009/12/26 Javascript
对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明
2010/03/20 Javascript
将string解析为json的几种方式小结
2010/11/11 Javascript
JS 实现图片直接下载示例代码
2013/07/22 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
2014/05/12 Javascript
javascript中DOM复选框选择用法实例
2015/05/14 Javascript
jQuery实现右键菜单、遮罩等效果代码
2016/09/27 Javascript
Bootstrap风格的WPF样式
2016/12/07 Javascript
jQuery remove()过滤被删除的元素(推荐)
2017/07/18 jQuery
Node.js微信 access_token ( jsapi_ticket ) 存取与刷新的示例
2017/09/30 Javascript
layer.open关闭父窗口 以及调用父页面的方法
2018/08/17 Javascript
layui table 多行删除(id获取)的方法
2019/09/12 Javascript
Vue 实现html中根据类型显示内容
2019/10/28 Javascript
[06:25]第二届DOTA2亚洲邀请赛主赛事第二天比赛集锦.mp4
2017/04/03 DOTA
[48:38]DOTA2亚洲邀请赛 3.31 小组赛 B组 Mineski vs Secret
2018/03/31 DOTA
win10系统中安装scrapy-1.1
2016/07/03 Python
Win10下Python环境搭建与配置教程
2016/11/18 Python
Python科学画图代码分享
2017/11/29 Python
Python实现七彩蟒蛇绘制实例代码
2018/01/16 Python
python进阶之自定义可迭代的类
2019/08/20 Python
python 获取计算机的网卡信息
2021/02/18 Python
CSS3选择器新增问题的实现
2021/01/21 HTML / CSS
处理HTML5新标签的浏览器兼容版问题
2017/03/13 HTML / CSS
将"引用"作为函数返回值类型的格式、好处和需要遵守的规则
2016/02/09 面试题
婚前协议书
2014/04/15 职场文书
本科应届生求职信
2014/08/05 职场文书
五四青年节活动总结
2015/02/10 职场文书
教导主任个人总结
2015/03/03 职场文书
2015年幼儿园保育工作总结
2015/05/12 职场文书
Python超详细分步解析随机漫步
2022/03/17 Python