让del.icio.us不影响页面的加载(转帖)

金山词霸有时加载太慢,在网上收索到这个解决的方法。感谢原作者。

让del.icio.us不影响页面的加载(转自:http://blog.osxcn.com/delicious-loading.html)

Published 1 month, 2 weeks ago in WordPress, CSS. Tags: del.icio.us | del.icio.us

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代码放在之间,放页面其他地方也可以。

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

One thought on “让del.icio.us不影响页面的加载(转帖)”

  1.   按文中的方法解决了金山词霸的调用加载影响整体页面的显示问题。

      代码依次如下 :

      1、在需要显示调用的地方:

    <div id="daily_loading" align="center"><a href="http://cb.kingsoft.com/html/help/365.php" target="_blank"><font color="red">每日一句</font></a>  loading...  [引自金山词霸]</div>

    <div id="daily_show" style="display:none;" align="center"></div>

      2、在页面的</body>和</html>之间:

    <script type="text/javascript">

     

       function daily() {

     

           document.getElementById("daily_loading").style.display = 'none';

           document.getElementById("daily_loaded").style.display = 'none';

           document.getElementById("daily_show").innerHTML=document.getElementById("daily_loaded").innerHTML;

           document.getElementById("daily_show").style.display = 'block';     

       };

     

       window.onload = daily;

     

    </script>

    <div id="daily_loaded" style="display:none" align="center"><a href="http://cb.kingsoft.com/html/help/365.php" target="_blank"><font color="red">每日一句</font></a>  <script language="javascript"  charset="gb2312" src="http://bill.cb.kingsoft.com/ads/365.php?act=a"></script>  [引自金山词霸]</div>

      具体意思不懂,但是以后碰到类似的问题就可以照抄了:)

      有机会还是要把js代码认真的学习一下。当然,以不影响我的工作和生活为前提。

      而且,我发现这种各种平台通用的解决方案更有利于代码的重用。

Comments are closed.