二月 24th, 2006

让del.icio.us不影响页面的加载

Category: CSS, WordPress, Author: Nicky, Popularity: 10%
del.icio.us linkrolls del.icio.us提供的linkrolls服务是个好东西，可以把它放在自己的Blog上、网站上，显示你所收藏的美味书签，很多朋友都这样做了。但是由于加载速度的问题让人头痛，所以很多朋友也不得不把它放在页面的最后，来换取速度带来的损失。我在Wordpress上用过Del.icio.us Integrator插件建立一个del.icio.us页面，来解决加载慢的问题，还是不理想。 如果按照我blog的页面布局来说，放在最后就得放在footer的前面，不然，右边的蓝色背景就会受到影响。那么在页面上的显示结果很是不爽，于是我想了一个老办法，使用一小段JS代码来完成这个任务。 道理很简单，就是先在需要放置linkrolls的地方插一个替代图片，等页面加载完成后隐藏图片显示真正的linkrolls代码。这样就可以把那段真正的linkrolls代码放在页面的最后，而不影响页面其他元素的加载。具体怎么实现？看看下面的实际做法就知道了。 1、把下面这段js代码放在
<head></head>
之间，放页面其他地方也可以。
<script type="text/javascript">
  
   function delicious() {
 
       document.getElementById("delicious_loading").style.display = 'none';
       document.getElementById("delicious_loaded").style.display = 'none';
       document.getElementById("delicious_show").innerHTML=document.getElementById("delicious_loaded").innerHTML;
       document.getElementById("delicious_show").style.display = 'block';       
   };
 
   window.onload = delicious;
 
</script>
2、把下面这段代码放在你需要显示linkrolls的地方。 (如果你想好看，可以把下面的loading...改成一个GIF动画什么的都可以)
<div id="delicious_loading">loading...</div>
<div id="delicious_show" style="display:none;"></div>
3、把下面这段代码放在页面的最后，例如：/html之前或之后，反正它不会显示出来。
<div id="delicious_loaded" style="display:none">你自己的linkrolls调用代码</div>
完成。效果见本Blog首页右边的“Recent Delicious”。 当然，你也可以把豆瓣收藏秀、Flickr badge、Google的广告或推介，反正一切影响你页面加载的代码都这样弄。如果你有兴趣还可以按照这个思路弄一些WP的插件。 BTW:上面的代码加亮效果使用andot的CoolCode插件。

Tags：, .
评论数量(5) | Add Comments
本文网址：http://www.osxcn.com/wordpress/delicious-loading.html



5 Comments so far

» You can leave a response or Trackback .

  1. Gravatar Icon Robbie Liu Says: 2006-02-24 6:32 下午
    Good tutorial.....it's quite useful
  2. Gravatar Icon zeax Says: 2006-02-24 7:14 下午
    太有用。。。谢谢伟大的关心。。
  3. Gravatar Icon spotdog520 Says: 2006-02-25 10:42 上午
    Niky你好，在这里说个与这个主题无关的事，Multi-Plugin2.3已经出来了，修正了不少问题，放一个上来让喜欢iTunes的人分享一下如何？
  4. Gravatar Icon nice Says: 2006-02-27 3:10 下午
    受教！！
  5. Gravatar Icon 81 Says: 2006-03-01 11:21 上午
    你好. 刚开始用wordpress,想问一下,你的recent posts是怎么做出来的?
    使用"Get Recent Comments" Nicky.

7 Trackbacks/Pingbacks

leave a reply