最近一直在钻研网站前端方面的学习,当然作为前端工作者代码精简,提升网页加载速度是必不可少的,相信有投放过类似于 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]
这样的话,页面加载速度就快了很多。
呵呵,很实用啊。
正在研究这个,借来参考,谢