Home >  > 加载网页完毕后再显示广告的方法

加载网页完毕后再显示广告的方法

2

最近一直在钻研网站前端方面的学习,当然作为前端工作者代码精简,提升网页加载速度是必不可少的,相信有投放过类似于 google adsense或百度联盟的朋友一定有所体会,在遇到网速不给力的情况下,打开网页总会停顿好一会,等待加载广告完毕后才会继续显示下面的内容,那么如何将广告对网页加载的影响降到最小是我们所要考虑的,因为目前浏览器总是阻塞式(blocking)的读取网页引用的外部JavaScript,所以雅虎网页优化14条准则中也提到把外部引用的脚本放在页面的底部,差不多是</body>之前。这样网页基本上能最快渲染完毕,然后再加载这些外部脚本。

提升网页加载速度代码如下:

[html]
<script type="text/javascript">
function speed_ads() {
var ad = document.getElementById('adsense'),
loader = document.getElementById('adsense-loader');
if (ad && loader) {
ad.appendChild(loader);
loader.style.display='block';
ad.style.display='block';
ad.style.height='60px';
}
}
window.onload=function() {speed_ads();}
</script>
[/html]

[html]
<html>
<head>
<!--上述脚本位置-->
</head>
<body>
<!--指定的广告显示位置-->
<div id="adsense"></div>
<!--其他内容位置-->
<p></p>
<p></p>
<!--广告代码位置-->
<div style="display:none">
<div id="adsense-loader" style="display:block">
<script type="text/javascript">
// 谷歌or百度广告代码
</script>
</div>
</div>
</body>
</html>
[/html]

网页上面只有一个广告时候的解决方法,如果有几个怎么办?
我们可以用下面的脚本替换原来的脚本,当然要注意一一对应。

[html]
<script type="text/javascript">
function speed_ads(loader, ad) {
var ad = document.getElementById(ad),
loader = document.getElementById(loader);
if (ad && loader) {
ad.appendChild(loader);
loader.style.display='block';
ad.style.display='block';
}
}
window.onload=function() {
speed_ads('adsense-loader0', 'adsense0');
speed_ads('adsense-loader1', 'adsense1');
speed_ads('adsense-loader2', 'adsense2');
}
</script>
[/html]
这样的话,页面加载速度就快了很多。

相关推荐

Comment (2)
Trackback (0)
  1. 高温电炉 unknowunknow 沙发 2011/09/02 11:01

    呵呵,很实用啊。

  2. 女人心 unknowunknow 板凳 2012/03/06 01:53

    正在研究这个,借来参考,谢 :mrgreen:

  • 还没有Trackback

发表评论

You must be logged in to post a comment.