Web 應用程式中提交表單時處理 GIF 動畫的最佳實踐

發表於2013-05-17
Web動畫

來源 developerWorks

簡介： 在 Web 應用中的提交表單時，為了很好的使用者體驗或防止表單重複提交，我們通常會從請求發起那一刻開始，展示出一個動態的 GIF 圖示來提示使用者請求正在處理。本文將介紹在傳統的提交方式下，如何巧妙地使用 Javacript 方式來解決請求發起時 IE 瀏覽器下動態沙漏圖示不播放的問題，以及在請求完成後點選瀏覽器回退按鈕，Firefox 瀏覽器依舊顯示著沙漏圖示的問題。

隨著各行各業“被網際網路”的現象出現，網際網路在我們的生活中變的無處不在，作為資料資訊收集的表單是其中一個不可或缺的角色。當頁面向伺服器提交數 據時，如果資料在後臺處理需要花費一定的時間才能完成，那麼在前端頁面停留的這段時間使用者的感覺會是乏味的，碰到性急的使用者，甚至避免不了提交按鈕被其一次又一次的點選，這樣不僅降低了使用者的體驗效果，更重要的是影響到了系統的效能和穩定性。

對於上述問題的解決方法，我們通常的做法是在使用者第一次進行正常提交操作後禁用掉提交按鈕，或者把提交按鈕隱藏，給出一個相對友好的提示資訊。以致從瀏覽器端達到防止表單重複提交的功能，並且也增強了使用者的使用體驗。

本文將通過具體例項詳細介紹如何實現上述效果，以及在實現過程中因不同瀏覽器的相容性不同，而引發的一些問題。

禁用提交按鈕並使用沙漏圖示給出提示

一個表單可以被應用到程式中實現各種資料收集的功能，如使用者登入註冊、條件查詢、發表微博資訊等，它的作用是讓使用者跟伺服器去做資料互動。我們這裡使用表單實現一個簡單的查詢功能。如清單 1 使用者在文字框中輸入關鍵字，點選“查詢”按鈕後提交表單，然後該按鈕被隱藏，同時出現一個不停轉動的沙漏圖示提示使用者操作正在處理。程式碼如下：

清單 1

圖 1.頁面效果

Web 應用程式中提交表單時處理 GIF 動畫的最佳實踐

圖 2.提交效果

Web 應用程式中提交表單時處理 GIF 動畫的最佳實踐

我們將清單 1 的程式碼儲存成 .html 格式檔案，使用 IE 瀏覽器開啟，輸入關鍵字後進行表單提交時會發現 GIF 格式的沙漏圖示是無法正常轉動的（如果提交後頁面跳轉過快而來不及觀看效果，可以把 Form 表單的 action 屬性值修改為一個開啟慢的網址），而相同的操作在 Firefox、Chrome 瀏覽器中是正常的。

解決 IE 瀏覽器下沙漏圖示無法播放的問題

由於瀏覽器對網頁元素處理的異同，使得我們寫出的效果，在相容性上無法達到完美執行。我們來通過修改清單 1 的程式碼分析一下問題。使用 JavaScript 指令碼在提交表單時只隱藏提交按鈕和顯示出沙漏圖片，但不讓瀏覽器進行跳轉。程式碼修改完成後再次進行提交操作，我們發現沙漏圖片這時候在 IE 瀏覽器下是可以正常播放的。從中也就可以得出結論，問題的出現是跟頁面的跳轉有關。於是我們可以試著在表單觸發了提交事件之後使用 JavaScript 指令碼給 img 元素的 src 屬性再賦一次值，重新啟用 Gif 沙漏圖示，根據思路我們修改清單 1 中的 validation() 方法，如清單 2：

清單 2

清單 2 的程式碼替換清單 1 中的 validation() 方法，我們儲存成 .html 格式檔案，再使用 IE 瀏覽器或 Firefox、Chrome 開啟，輸入要查詢的關鍵字，點選“查詢”按鈕，於是我們發現想要的效果在不同瀏覽器中得以完美執行。

解決點選瀏覽器回退按鈕 Firefox 中仍顯示沙漏圖示的問題

表單提交後，顯示出了查詢結果列表頁面，很多情況下使用者會需要改變關鍵字重新進行查詢，儘管我們可以在結果頁面展示出一個很方便的查詢框，但是仍然無法避免使用者去點選瀏覽器的回退按鈕來完成重新查詢的操作。

如清單 2 的程式碼，在 Firefox 瀏覽器中，從查詢頁面跳轉到結果頁面後，點選瀏覽器回退按鈕，我們希望被回退到查詢頁面後，提交按鈕是正常顯示的，但事實是提交按鈕被沙漏圖片所替換，也就是無法再進行重新查詢的操作。

為了尋找問題，我們可以把清單 1 的程式碼在 Firefox 中執行一下回退的步驟，來排除是否是因為相容 IE 瀏覽器的程式碼破壞了 Firefox 下的效果。

當我們拿清單 1 的程式碼執行完之後，發現提交按鈕在點選了瀏覽器回退之後是正常顯示的，於是說明清單 2 的程式碼對 Firefox 中的效果造成了破壞，所以我們可以使用判斷瀏覽器型別的方式對清單 2 的程式碼再次進行修改。如果是 IE 瀏覽器，就執行 setTimeout 這條語句，對於其它瀏覽器則不執行。如清單 3：

清單 3

線上生成沙漏圖示

對於網站內容載入時的等待，給出一個狀態提示絕對是一個明智的做法。當我們需要用到一個跟網站風格匹配的沙漏（Loading 狀態）圖示時，而又無法找到專門的美工設計人員，可以藉助線上的沙漏圖示生成工具，它們不僅提供了各種的樣式，而且可以自定義尺寸、顏色甚至播放的速度等引數。這裡為大家提供三款比較優秀的站點：

相關文章