原创，广告延迟加载代码、广告最后加载代码（非innerHTML）

chenghua · 发表于 2012-4-20 07:51:54

本帖最后由 chenghua 于 2012-4-20 07:53 编辑

以前广告延迟加载，一般是利用innerHTML的方式，将最后加载的广告代码替换到广告显示位置。

但是这样会照成广告2次显示。从而降低了广告单价（对 google adsense 的影响最明显）。而且一多了，容易引起JS脚本出错。

这几天我也一直在纠结这个问题，今天抽空研究了下，利用zIndex的方式。将最后加载的广告代码移动到需要显示的广告位置，这样就不会照成多次展示的问题了。

延迟加载广告效果演示：http://www.51240.com/shenfenzheng/

现将代码共享出来：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>广告延迟加载</title>
<script type="text/javascript">
//延迟加载广告效果演示：http://www.51240.com/shenfenzheng/
function gg_load_content(gg_load_show_id, gg_load_content_id) {
//设置“广告内容元素”的显示样式
document.getElementById(gg_load_content_id).style.display = "block";
document.getElementById(gg_load_content_id).style.position = "absolute";
document.getElementById(gg_load_content_id).style.zIndex = "5";
//设置“广告内容元素”的大小
document.getElementById(gg_load_content_id).style.width = document.getElementById(gg_load_show_id).clientWidth+"px";
document.getElementById(gg_load_content_id).style.height = document.getElementById(gg_load_show_id).clientHeight+"px";
//将“广告内容元素”移动到“广告显示位置”上，并且遮罩“广告显示位置”（500为半秒校对一次广告位置）
gg_load_monitor(gg_load_show_id, gg_load_content_id, 500);
}
function gg_load_monitor(gg_load_show_id, gg_load_content_id, monitor_time) {
if (document.getElementById(gg_load_show_id).getBoundingClientRect().top != document.getElementById(gg_load_content_id).getBoundingClientRect().top || document.getElementById(gg_load_show_id).getBoundingClientRect().left != document.getElementById(gg_load_content_id).getBoundingClientRect().left)
{
//将“广告内容元素”移动到“广告显示位置”上，并且遮罩“广告显示位置”
document.getElementById(gg_load_content_id).style.left = (document.body.scrollLeft+document.documentElement.scrollLeft+document.getElementById(gg_load_show_id).getBoundingClientRect().left)+"px";
document.getElementById(gg_load_content_id).style.top = (document.body.scrollTop+document.documentElement.scrollTop+document.getElementById(gg_load_show_id).getBoundingClientRect().top)+"px";
}
//自动循环校准广告显示位置
setTimeout(function(){gg_load_monitor(gg_load_show_id, gg_load_content_id, monitor_time);}, monitor_time);
}
</script>
</head>
<body>
<br />测试<br />测试<br />测试<br />测试<br />测试<br />
<div id="ggwz_468x60" style="width:468px;height:60px;"></div>
测试<br />测试<br />测试<br />测试<br />测试<br />测试<br />
<div id="ggwz_468x60_content" style="display:none;">
<img src="http://img01.taobaocdn.com/tps/i1/T1iMy_XdFqXXXXXXXX-490-170.png" width="468" height="60" />
</div>
<script type="text/javascript">
//调用说明：gg_load_content("广告显示位置id", "广告内容元素id");
gg_load_content("ggwz_468x60", "ggwz_468x60_content");
</script>
</body>
</html>

复制代码

... · 发表于 2012-4-20 13:09:22

kiss you~~

凰城小风 · 发表于 2012-4-21 12:09:39

坦克有。

tony · 发表于 2012-4-21 13:03:12

good

账号		自动登录	找回密码
密码			注册

[建站交流] 原创，广告延迟加载代码、广告最后加载代码（非innerHTML）