如何提高网页中图片显示的用户体验（附源码下载）

文章中加入适量的图片不仅可以更好的说明和补充文章的内容，而且还可以极大的减缓阅读者在阅读较长篇幅文章时的疲劳和不安。所以图文混排较好的文章能给阅读者更好的用户体验和享受。但是令人遗憾的是很多的网页图片的显示并不十分理想，非但没有给阅读者带来好的阅读享受，反而给文章的阅读带来了不少的麻烦。其中的“麻烦制造者”就是尺寸很大的图片。如何适当的显示大尺寸的图片则变成了解决问题的关键。

对于大尺寸的图片显示以前的做法主要有以下几种：

1.用width和height强制将大图片显示时变小，点击图片时在新的页面中显示大尺寸的图片。
2.用iframe将图片套起来限制图片的最大占用尺寸，用局部的横向和竖向滚动条来观看全局。
3.用缩略图方式，平时显示一个小的图片，点击图片时在新的页面中显示大尺寸的原图。

第1种实现最简单，而且很方便，但是就目前中国的网速来看这种方法尤其致命的弊端。
第2种方法是愚蠢的方法，先不说iframe不提倡用，就是网页上一坨坨的滚动条就让人想点X。
第3种是最成熟也是现在实用最多的办法。不可否则缩略图+原图的方法就目前的中国网速而言是最好的模式，这个方法的问题也不是这点，而是那个弹出的新窗口。新的窗口意味着客户计算机资源的消耗。现在就看看你的windows任务栏上到底有多少打开的窗口你就知道这种弹出新窗口的方法是多么令人讨厌。虽然现在多tab浏览器已经很多，但是也需要在新的tab呈现大尺寸图片，阅读者必须先离开当前的阅读窗口（tab），到新弹出的窗口（tab）才能看到大尺寸的原图，然后还需要回到原来的阅读窗口。这样会打断阅读者的阅读连贯性，容易分散阅读者的注意力，加速阅读者的阅读疲劳。所以说这也不是一种用户体验好的方法。

如何显示图片才能给阅读者较好的用户体验呢。微软的MSDN Magazine 网站给了我们一些参考。（http://msdn.microsoft.com/msdnmag/issues/07/04/ASPNET20/default.aspx文章也很不错，推荐看看）。

其中有个图片，你试着点击一下小图就可以立即得到大尺寸的原图。缩略图和大尺寸原图的切换在利用javascript脚本在同一个窗口中无停滞的切换，给人一种很俐落的感觉。

方法一：利用文档替换来实现显示缩略图原图的方法。它的好处是符合传统的用户操作习惯和阅读习惯。缺点是:破坏原有文档布局。

参数说明：ToggleImages(hideImage, showImage)

hideImage：欲隐藏的文档标签；
showImage：欲显示的文档标签；

研究一下代码就知道如何实现，不再多说。但是必须提醒一下：它的写法很糟糕，不符合web标准，不提倡那种style直接写到前台的做法。我提供的Demo源码中已经对此做出了适当的修正。
（下载地址：https://files.cnblogs.com/JustinYoung/pictureUE.rar）

另外一种方法是利用悬浮层来显示缩略图的原图，这个方法通用性很强，不仅可以用来显示缩略图的原图，还可以用于其他用途，例如用来显示一些描述和文档补充等等。它的好处是不占用文档流中的空间而是悬浮出来的层，这样不会影响原文档的布局。缺点是：当原图很大的时候，有可能出现横向滚动条，而此滚动条的操作体验很差。

对几个重要参数说明一下：at_attach(parent, child, showtype, position, cursor)
parent ：引发出现悬浮层事件的父容器便签ID；
child ：悬浮层便签ID；
showtype ：引发出现悬浮层事件的行为。可以是click或者是hover；
cursor ：父容器鼠标样式；

这两种方法都是通过缩略图+大尺寸原图来解决网速问题，通过在同一个窗口显示大尺寸图片来解决阅读的连续性问题。是用户体验度较高的网页显示图片的方法，值得推荐。

keyword:网站用户体验,microsoft 用户体验,ue 用户体验,图片缩略图,网页缩略图显示