加载多个广告不影响网页打开速度

William2011-03-07 20:56设计16,115次浏览44条评论

扫一扫手机看

今天给博客做了点修改，然后发现加载网页真的快了不少，特别是在宿舍网速很不给力的情况下。由于放了百度广告，打开文章页加载到标题就会停顿一下加载广告，网速卡的话要等好一会儿，虽说广告没什么点击率，但是总比没有强，是吧。

那么如何将广告对网页加载的影响降到最小是我们所要考虑的，王晔童鞋的这篇文章《避免谷歌广告影响页面加载速度》就很好的解决了这个问题，此人隐藏甚深，平时一般不抛头露面，好东西都藏着，大家一般很难注意到，所以我还是要推荐一下下。

因为目前浏览器总是阻塞式(blocking)的读取网页引用的外部JavaScript，所以雅虎网页优化14条准则中也提到把外部引用的脚本放在页面的底部，差不多是</body>之前。这样网页基本上能最快渲染完毕，然后再加载这些外部脚本。

他的方法是这样的：


<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>
 <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>

王晔同学只给了网页上面只有一个广告时候的解决方法，如果有几个怎么办？

我们可以用下面的脚本替换原来的脚本，当然要注意一一对应。


<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>

这样的话，页面加载就快了很多了。

赏

加载多个广告不影响网页打开速度：目前有 44 条评论

22楼
阚阚_Jun：

太晚了.明天研究一下.

2011-10-15 23:06 回复
21楼
bestchao：

经过测试发现在google chrome浏览器下此方法首页打开网页无法显示出来google adsense，只有在本页刷新后才会正常显示出来，不知有没有发现这个问题。

2011-08-23 17:00 回复
- William博主：
  
  @bestchao木有啊，不管是百度的还是google的都能正常显示，可能是你自己没有添加正确。
  
  2011-08-23 17:05 回复
  - bestchao：
    
    @William没错的呀,www.bestchao.com 我的网站你帮忙检查下，我替换成百度的广告就可以显示正常。问题出在哪里了？
    
    2011-08-23 20:55 回复
20楼
Tueur：

博主你贴code是用什么插件？

2011-04-30 08:46 回复
19楼
海天：

这个弹出方式貌似比我那个好
我那个有的浏览器不兼容
晚上回去试试这个

2011-04-08 10:20 回复
- William博主：
  
  @海天我这个全兼容的，我都测试过了
  
  2011-04-08 17:06 回复
18楼
工作室：

这种方法其实谷歌的AdSense官方博客很早就推荐过了的

2011-03-17 09:48 回复
- William博主：
  
  @工作室是么。没有看过，不过这个效果还是很实用的
  
  2011-03-17 12:24 回复
17楼
xuan律：

我一博客图片多，也是个烦恼。

2011-03-16 22:01 回复
- William博主：
  
  @xuan律是滴，所以上传图片先压缩一下，我的图片虽然外链，但是我都压缩过的，图片也很少失真
  
  2011-03-17 12:24 回复
16楼
爱惜：

对自己的博客暂时还没有加广告的想法，还是喜欢简洁。

2011-03-12 18:21 回复
- William博主：
  
  @爱惜呵呵，你的博客确实比较简洁
  
  2011-03-13 15:06 回复
15楼
reizhi：

现在没放AD了，感觉赚不到钱

2011-03-12 13:45 回复
- William博主：
  
  @reizhi是的，现在做联盟广告没有以前那么好了
  
  2011-03-13 14:47 回复
14楼
小星：

看懂了，确实是不错的方法！

2011-03-11 16:00 回复
- William博主：
  
  @小星看懂了就好，哈哈
  
  2011-03-11 17:07 回复
13楼
四十三度：

在以前看到过介绍这方法的，挺好的。就是没用哈哈

2011-03-10 22:44 回复
- William博主：
  
  @四十三度方法很多，用JS不一样，效果都是一样的
  
  2011-03-11 13:10 回复