Javascript实现广告后加载可加载百度谷歌联盟广告[原创]_javascript技巧
时间:2021-07-01 10:21:17
帮助过:31人阅读
本文主要介绍一种新的广告后加载的方式,支持自定义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('http://www.gxlcms.com/" target="_blank">脚本之家');
};
jbMap['ads_two'] = function() {
document.writeln('var cpro_id = "u336546"; script>');
};
jbMap['ads_three'] = function() {
document.writeln('http://www.gxlcms.com">(adsbygoogle = window.adsbygoogle || []).push({});');
};
注意:jbMap是放置广告的数组,数组的Key和Span标记的ID是对应的,我们可以在这个JS中按照这种形式添加自己的广告。这种广告加载方式,支持自定义的HTML广告、百度联盟广告、谷歌联盟广告,这里都给大家做了演示。
三、在页面底部中引入JS,调用jbLoader加载广告
代码如下: