优化Twitter在博客中的显示

日期 : 2009年05月22日分类 : 有码设计作者 : Sivan13 条评论

很多朋友都在博客上集成了Twitter的Widget显示，在Retweet主题则直接当一个版块集成在主题里。在twitter的apps可以生成基于Flash或者JS的代码。基于Flash的样式上已经无法自己定义，这里就说说JS输出的一些优化。

我也一直用下面的代码显示twitter的更新列表而没有用其他插件。我们可以通过CSS对输出的这个列表进行美化，这还不是本文要说的内容。
默认的JS代码如下：


Twitter Updates

follow me on Twitter

我想说的是这个代码在实际使用上发现有两个问题：
1.代码不符合W3C规范
2.JS影响页面载入速度

第一个，由于代码<ul>标签里面没有<li>就直接闭合，虽然不影响使用，但不符合W3C标准。解决方法很简单，自己手动加个<li>就可以。当JS调出你的tweet之后这个li会自己消失，不影响显示。以前我一直用废标签<li>more</li>解决。

第二个问题，也是我觉得最严重的问题，Twitter的这个代码没法让我放心放到HTML文档流的前面。Twitter不能保证每次请求这个JS都有很好的返回速度，不影响下面内容的显示。所以我们更多的倾向JS影响的内容放在侧栏的同时，侧栏的代码一定要在正文的后面，哪怕是左侧栏布局。因为万一Twitter服务器相应慢了，那后面的内容会等很久才能显示，严重影响访客体验。更严重的是若出现插件错误，PHP会直接中断在那个位置，后面的内容直接不显示了。所以无论如何，文章区域在HTML文档流里一定要在侧栏前面，Twitter的这个代码同样如此不该放在正文的前面。

像在Retweet主题中，由于样式需要，这段代码必须在前面。我曾经考虑过用CSS的布局来改善这个问题，但没有很合适的解决办法，毕竟高度不是固定的，左右易换，上下难调。大家也不可能在自己主题中把twitter的widget放到不起眼的位置去显示。怎么更好的解决呢？

那么只好把代码拆开，HTML该在哪在哪，把JS放到最后加载。这样的优点是不影响页面的载入速度，页面读取完了再读twitter的JS代码，最后显示twitter列表。缺点是页面载入前那个区域空空的。

可刚才第一条提到，由于本身的代码不符合W3C标准，我们要放个多余的<li>在里面。我们干脆就让它显示一个载入状态不就能完美的解决了？

实际操作就是，把JS代码放到页面的最后，</body>前面。

然后给原来的<ul>添加一个<li>显示"loading..."如下


Twitter Updates
Loading...
follow me on Twitter

这样在JS载入前显示“loading...”，载入后替换为twitter列表，不影响页面载入速度。同时又符合了W3C标准，两全齐美了。

Tags : twitter

本博文章均为Sivan原创，内容遵循署名-非商业性使用 2.5 共享协议，转载请注明来自 Sivan's Blog 。
原文链接为 http://sivan.in/blog/optimize-twitter-widgets/
这篇日志发表于2009年05月22日 14:07。你可以订阅该日志的所有评论通过RSS 2.0。评论跟引用通告当前被关闭。

« 在黑莓上怎么推最好？

暴风影阴——危害力堪比病毒的播放器？ »

13 条回应

评论(13)引用通告(0)

Showfom
我的英文博客：http://nba-2k.com/ 目前也在用，考虑要换个主题了
2009-05-23 14:14 | #1
晕王
我必须弯腰谢谢你!!
2009-05-24 23:57 | #2
blueidea05
有没有办法令到这个官方的插件有诸如“不刷新翻页”的效果？
2009-08-01 17:14 | #3
- Sivan
  那得用到ajax，我还不会~
  2009-08-01 19:21 | #4
卫星
我正试图将Twitter换成不用翻墙的huotu.com 请问如何修改该代码才能避免先加载huotu更新后加载bolg首页？（中间总是有1秒的延迟才能显示首页）
演示见我的blog
2009-08-31 19:51 | #5
- Sivan
  @卫星 , 如果是JS的跟TWITTER这个一样把JS放到页脚就行了。如果只有一行JS我也没办法了 😐
  2009-08-31 20:54 | #6
  - 卫星
    @Sivan , 实话我是不太会放，我是直接覆盖里你的那最新5篇文章代码，推特的代码未修改。代码如下
    
    正在加载嘀咕...
    
    wudiShow.setUrl("http://www.huotu.com/");wudiShow.setSiteName("火兔");
    2009-09-01 02:26 | #7
    - 卫星
      正在加载嘀咕...
      wudiShow.setUrl("http://www.huotu.com/");wudiShow.setSiteName("火兔");
      2009-09-01 02:29 | #8
    - Sivan
      @卫星 , 我看了下那个代码。你把wudishow生成的代码第一个div正在加载的保留，然后把后面所有的script代码都放到footer里应该就行了。
      2009-09-01 04:19 | #9
卫星
非常感谢，已经搞定。 😛
2009-09-01 10:57 | #10
羽中
Sivan这咋不显示源代码了。。？直接把效果显示给显出来了 😕
2009-12-28 16:33 | #11
- Sivan
  我这就改~
  2009-12-28 16:59 | #12
Lyda Petriccione
A formidable share, I simply given this on to a friend who was doing slightly analysis on this. As well as he the truth is purchased me breakfast because I found it for him.. smile. So let me reword this: Thnx for the deal with! But yeah Thnkx for spending the time to debate that, I feel strongly about it as well as love studying extra on this subject. If possible, as you change into expertise, would you thoughts updating your blog with extra details? It's extremely useful for me. Massive thumb up for this blog submit!
2011-02-11 07:20 | #13