这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文主要介绍一种新的广告后加载的方式,支持自定义 html 广告、百度联盟广告和谷歌联盟广告。这种方式在页面加载完成后执行,不影响内容的显示,对用户更加友好。
本文主要介绍一种新的广告后加载的方式,支持自定义 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("");
- jbViaJs(jbTest.id);
- return
- }
- document.write("");
- 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('http://www.phperz.com/" target="_blank">phperz');
- };
- jbMap['ads_two'] = function() {
- document.writeln('var cpro_id = "u336546";http://cpro.baidustatic.com/cpro/ui/c.js" type="text/javascript">');
- };
- jbMap['ads_three'] = function() {
- document.writeln('http://www.phperz.com"></ins><scri'+'pt>(adsbygoogle= window.adsbygoogle || []).push({});');
- };
注意: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. 用两个 3. 有几个占位符就写几行 script 是为了互不影响,各显示各的。
总之:好多大网站都在使用这种方法,大家放心用好了。至此,就完成了页面广告后加载的调用。
来源: http://www.phperz.com/article/17/0619/265871.html