Page 44 - JavaScript修炼之道

32 第三部分 UI技巧

任务 14 预载入图片

页面可能会提供切换图片的用户交互操作，比如切换为放大或特写的图片、前/后视角图片
的切换等。这时，由于要用来切换的那张图片需要载入时间，用户会看到瞬间的空白，你肯定不
希望做成这样。这就需要你预载入那张要用的图片。

总体来看，只有三种预载入图片的方法。

 用JavaScript动态创建带有合适src属性的Image对象：这种方法允许检测预载入图片何时
真的被载入了。
 用CSS隐藏已载入了的图片：这其实就是给要预载入的图片使用隐藏的 <img> 标签。可
以隐藏 <img> 标签本身，也可以隐藏这些 <img> 标签的公共容器标签（我更倾向于隐藏
公共容器标签）。
①
 使用CSS sprites：如果打算预载入rollover 这类东西或者一批相关联的图片（比如背景、
边框、边角），这无疑是更好的办法。
②
CSS较为直接，不过其控制能力不及JavaScript。右页的标记和脚本代码做了如下假设：假设
每个所在的 <img> 标签中带有 rel="preloadZoom" 属性的图片在同样的URI下都有一份特写版
本，其文件名加有 _closeup 后缀。特写版本的图片将被预载入，以实现特写rollover效果。

通常在这种情况下用JavaScript比CSS好。因为rollover功能本身要用JavaScript实现，所以我
们就用JavaScript做预载入（这样的话如果用户环境不支持JavaScript，就没必要载入不会被显示
的图片了）。此外，用JavaScript预载入可以避免标记及样式膨胀。

如果是用JavaScript，只要我们在确定预载入完成之后再做切换，就能避免出现瞬时空白或

不完整显示。而不使用sprite的CSS则有可能会切换到尚未载入的图片（诚然，这样的可能性其
实很小）。
想要了解更多关于快速图片载入的核心技巧，请看Steve Souder 2009年5月的演讲稿——快速
图片载入的14条法则。
③

——————————
① 指一个图片，当鼠标移到上面就变成另一个图片，鼠标移开又变回来。*
② 即“14 rules for faster-loading images”，看看原创的http://www.alistapart.com/articles/sprites和最近的http://css-tricks.com/
css-sprites/。Steve Souders同时也维护了一个SpriteMe工具：http://spriteme.org/。
③ 参见http://stevesouders.com/docs/wordcamp-20090530.ppt。