php怎样实现广告功能,Javascript 实现同时加载多个广告功能,可加载百度谷歌联盟广告...

本文介绍了如何实现广告后加载,以提高网页加载速度和用户体验。通过在页面上设置占位符,并在页面底部引入JS脚本逐个替换,确保广告加载不影响内容显示。该方法支持自定义HTML、百度联盟和谷歌联盟广告,且详细解释了JS代码的工作原理和实现步骤。
摘要由CSDN通过智能技术生成

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

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

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

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

一、在页面上放置占位符,其实就是一个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('php程序员的笔记');

};

jbMap['ads_two'] = function() {

document.writeln('var cpro_id = "u336546";');

};

jbMap['ads_three'] = function() {

document.writeln('(adsbygoogle = window.adsbygoogle || []).push({});');

};

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

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

注意:格式必须是如上这种格式,有几个占位符,就添加几个

不要问小编为什么要这样调用,其实小编也研究了一下:

1.第一次jbLoader()是为了写标记,第二次jbLoader(true)是为了替换标记。

2.用两个

3.有几个占位符就写几行script是为了互不影响,各显示各的。

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值