文章中加入適量的圖片不僅可以更好的說明和補充文章的內容，而且還可以極大的減緩閱讀者在閱讀較長篇幅文章時的疲勞和不安。所以圖文混排較好的文章能給閱讀者更好的用戶體驗和享受。但是令人遺憾的是很多的網頁圖片的顯示并不十分理想，非但沒有給閱讀者帶來好的閱讀享受，反而給文章的閱讀帶來了不少的麻煩。其中的“麻煩制造者”就是尺寸很大的圖片。如何適當的顯示大尺寸的圖片則變成了解決問題的關鍵。

對于大尺寸的圖片顯示以前的做法主要有以下幾種：

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源碼中已經對此做出了適當的修正。
（下載地址：http://files.cnblogs.com/JustinYoung/pictureUE.rar）

另外一種方法是利用懸浮層來顯示縮略圖的原圖，這個方法通用性很強，不僅可以用來顯示縮略圖的原圖，還可以用于其他用途，例如用來顯示一些描述和文檔補充等等。它的好處是不占用文檔流中的空間而是懸浮出來的層，這樣不會影響原文檔的布局。缺點是：當原圖很大的時候，有可能出現橫向滾動條，而此滾動條的操作體驗很差。

對幾個重要參數說明一下：at_attach(parent, child, showtype, position, cursor)
parent ：引發出現懸浮層事件的父容器便簽ID；
child ：懸浮層便簽ID；
showtype ：引發出現懸浮層事件的行為。可以是click或者是hover；
cursor ：父容器鼠標樣式；

這兩種方法都是通過縮略圖+大尺寸原圖來解決網速問題，通過在同一個窗口顯示大尺寸圖片來解決閱讀的連續性問題。是用戶體驗度較高的網頁顯示圖片的方法，值得推薦。

keyword:網站用戶體驗,microsoft 用戶體驗,ue 用戶體驗,圖片縮略圖,網頁縮略圖顯示

轉載于:https://www.cnblogs.com/JustinYoung/archive/2007/07/09/UE-for-picture.html

總結

以上是生活随笔為你收集整理的如何提高网页中图片显示的用户体验（附源码下载）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。