增强用户体验，进一步美化友链页面，添加loading图片

上篇文章我讲了对友情链接页面的美化——自动添加favicon.ico图标，后来在测试中，发现由于icon图标是从各个网站上下载下来的，由于其所处服务器的不同，导致下载速度不一，有时需要很久才可以下载过来，这严重影响了我的网站的加载速度。有没有什么方法能改变这种状况？

我想到两种方法：一是从根源上解决加载速度问题，即在我的主机服务器上缓存这些图标（本站的gravatar头像图标即利用了缓存），但是我代码不熟，估计写不出来，就不试了。二是添加一个loading图标，增强用户体验。最后我选择用这种方法。

刚开始我抱着很简单的想法，直接给img对象添加background-image属性，加入一个loading图片。但是测试后，才发现，由于有些favicon图标是有透明度的，所以此时背后那个loading图标就会显露出来。如下图 所以得在图标加载后隐藏掉那个loading图片。无疑得用JavaScript了。最初我想在全局隐藏，即在footer.php中用JavaScript去除所有img对象的background-image属性，但是这样处理，如果有页面上有一个图标未加载完成，其它已加载好的favicon图标后面的loading图片依然无法消除。

所以我决定利用img对象的onload属性，即图片加载完成后触发的动作。将隐藏函数直接写入img叙述中。

先来看看处理过以后的html源码：

<img onerror="javascript:this.src='/files/links.gif'"

onload="javascript:this.style.backgroundImage='none'"

src="http://bbs.pcbeta.com/favicon.ico" style="background: url(loading.gif) repeat scroll 

center center transparent;"/>

那个onerror知道是什么吧？不知道看我上篇文章。style中的background设置了一个loading图片，即可在图标位置背景处显示。我们要做的就是在图片加载后去除这个图片。onload（它常见于被用于window对象）是我在这里添加的一个对象属性。图片加载完成后触发动作函数javascript:this.style.backgroundImage=’none’，将这个img对象的background-image属性去除，即去掉了后面的loading图片。

至于怎么处理我就无需多讲了吧，就像我上篇文章所讲的添加onerror属性一样加到那里即可。

具体效果请再次移步到我的友情链接页面吧！

——————————————————————分割线——————————————————————

有了以上思路，我们可以将这个方法拓展一下。比如，可以给gravatar头像添加这个，甚至侧边栏的wp-recentcomments。方法都是一样的。本站即这样处理了gravatar头像。

再广一点，可以给全站的img对象添加这个。当然，如果只是给文章中图片对象加入loading图片，则只需css中定义好一个class样式，如

.imgload{//手动给每个img对象加入class=imgload

   background:url(loading.gif) no-repeat center center;

   }

img{//全站图片加上loading图片，如果有页面有透明属性图片，则会显示出背后的loading图片

   background:url(loading.gif) no-repeat center center;

   }

以后文章中加入的图片可以给加个class=imgload,即可在图片未加载时显示一个loading图片了。这里没有考虑图片加载后隐藏掉loading图片，因为文章中图片大都是jpg，很少透明吧！呵呵，不排除有人会用有透明的png，gif图片，这些人还是考虑用JavaScript来处理这个问题吧。