February 24th, 2006
让del.icio.us不影响页面的加载
Category: CSS, WordPress, Author: Nicky, Popularity: 10%
del.icio.us提供的linkrolls服务是个好东西，可以把它放在自己的Blog上、网站上，显示你所收藏的美味书签，很多朋友都这样做了。但是由于加载速度的问题让人头痛，所以很多朋友也不得不把它放在页面的最后，来换取速度带来的损失。我在Wordpress上用过Del.icio.us Integrator插件建立一个del.icio.us页面，来解决加载慢的问题，还是不理想。
如果按照我blog的页面布局来说，放在最后就得放在footer的前面，不然，右边的蓝色背景就会受到影响。那么在页面上的显示结果很是不爽，于是我想了一个老办法，使用一小段JS代码来完成这个任务。
道理很简单，就是先在需要放置linkrolls的地方插一个替代图片，等页面加载完成后隐藏图片显示真正的linkrolls代码。这样就可以把那段真正的linkrolls代码放在页面的最后，而不影响页面其他元素的加载。具体怎么实现？看看下面的实际做法就知道了。
1、把下面这段js代码放在
之间，放页面其他地方也可以。
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_show" style="display:none;"></div>
3、把下面这段代码放在页面的最后，例如：/html之前或之后，反正它不会显示出来。
完成。效果见本Blog首页右边的“Recent Delicious”。
当然，你也可以把豆瓣收藏秀、Flickr badge、Google的广告或推介，反正一切影响你页面加载的代码都这样弄。如果你有兴趣还可以按照这个思路弄一些WP的插件。
BTW:上面的代码加亮效果使用andot的CoolCode插件。
Tags：del.icio.us, WordPress.
评论数量(5) | Add Comments
本文网址：http://www.osxcn.com/wordpress/delicious-loading.html
Good tutorial…..it’s quite useful
太有用。。。谢谢伟大的关心。。
Niky你好，在这里说个与这个主题无关的事，Multi-Plugin2.3已经出来了，修正了不少问题，放一个上来让喜欢iTunes的人分享一下如何？
受教！！
你好. 刚开始用wordpress,想问一下,你的recent posts是怎么做出来的?