Web 应用程序中提交表单时处理 GIF 动画的最佳实践
来源 developerWorks
简介： 在 Web 应用中的提交表单时，为了很好的用户体验或防止表单重复提交，我们通常会从请求发起那一刻开始，展示出一个动态的 GIF 图标来提示用户请求正在处理。本文将介绍在传统的提交方式下，如何巧妙地使用 Javacript 方式来解决请求发起时 IE 浏览器下动态沙漏图标不播放的问题，以及在请求完成后点击浏览器回退按钮，Firefox 浏览器依旧显示着沙漏图标的问题。
随着各行各业“被互联网”的现象出现，互联网在我们的生活中变的无处不在，作为数据信息收集的表单是其中一个不可或缺的角色。当页面向服务器提交数 据时，如果数据在后台处理需要花费一定的时间才能完成，那么在前端页面停留的这段时间用户的感觉会是乏味的，碰到性急的使用者，甚至避免不了提交按钮被其一次又一次的点击，这样不仅降低了用户的体验效果，更重要的是影响到了系统的性能和稳定性。
对于上述问题的解决方法，我们通常的做法是在用户第一次进行正常提交操作后禁用掉提交按钮，或者把提交按钮隐藏，给出一个相对友好的提示信息。以致从浏览器端达到防止表单重复提交的功能，并且也增强了用户的使用体验。
本文将通过具体实例详细介绍如何实现上述效果，以及在实现过程中因不同浏览器的兼容性不同，而引发的一些问题。
禁用提交按钮并使用沙漏图标给出提示
一个表单可以被应用到程序中实现各种数据收集的功能，如用户登录注册、条件查询、发表微博信息等，它的作用是让用户跟服务器去做数据交互。我们这里使用表单实现一个简单的查询功能。如清单 1 用户在文本框中输入关键字，点击“查询”按钮后提交表单，然后该按钮被隐藏，同时出现一个不停转动的沙漏图标提示用户操作正在处理。代码如下：
清单 1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
<title>Search Test</title>
<style type="text/css">
body{margin:0;padding:0;}
.content{margin:0 auto;width:350px;font:13px/27px Arial,sans-serif;}
.content input, .content img{vertical-align:middle;margin-left:3px;}
.content .input_text{border:1px solid #ccc;height:18px;}
.content #submit_btn{height:24px;}
</style>
<script type="text/javascript">
function getId(id) {
return document.getElementById(id);
}
function validation() {
getId("submit_btn").style.display="none";
getId("wait_tip").style.display="";
return true;
}
</script>
</head>
<body>
<div class="content">
<form action="http://loading.ibm.com/" enctype="multipart/form-data" method="get"
onsubmit="return validation();">
<label>Keyword:</label>
<input name="q" class="input_text" type="text" value=""/>
<input value="Search" id="submit_btn" type="submit" />
<span id="wait_tip" style="display:none;"><img src="images/loading.gif"
id="loading_img"/> Please wait...</span>
</form>
</div>
</body>
</html>
图 1.页面效果
图 2.提交效果
我们将清单 1 的代码保存成 .html 格式文件，使用 IE 浏览器打开，输入关键字后进行表单提交时会发现 GIF 格式的沙漏图标是无法正常转动的（如果提交后页面跳转过快而来不及观看效果，可以把 Form 表单的 action 属性值修改为一个打开慢的网址），而相同的操作在 Firefox、Chrome 浏览器中是正常的。
解决 IE 浏览器下沙漏图标无法播放的问题
由于浏览器对网页元素处理的异同，使得我们写出的效果，在兼容性上无法达到完美运行。我们来通过修改清单 1 的代码分析一下问题。使用 JavaScript 脚本在提交表单时只隐藏提交按钮和显示出沙漏图片，但不让浏览器进行跳转。代码修改完成后再次进行提交操作，我们发现沙漏图片这时候在 IE 浏览器下是可以正常播放的。从中也就可以得出结论，问题的出现是跟页面的跳转有关。于是我们可以试着在表单触发了提交事件之后使用 JavaScript 脚本给 img 元素的 src 属性再赋一次值，重新激活 Gif 沙漏图标，根据思路我们修改清单 1 中的 validation() 方法，如清单 2：
清单 2
function validation() {
getId("submit_btn").style.display="none";
getId("wait_tip").style.display="";
setTimeout(function(){getId("loading_img").src=getId("loading_img").src},\
10);
return true;
}
清单 2 的代码替换清单 1 中的 validation() 方法，我们保存成 .html 格式文件，再使用 IE 浏览器或 Firefox、Chrome 打开，输入要查询的关键字，点击“查询”按钮，于是我们发现想要的效果在不同浏览器中得以完美运行。
解决点击浏览器回退按钮 Firefox 中仍显示沙漏图标的问题
表单提交后，显示出了查询结果列表页面，很多情况下用户会需要改变关键字重新进行查询，尽管我们可以在结果页面展示出一个很方便的查询框，但是仍然无法避免用户去点击浏览器的回退按钮来完成重新查询的操作。
如清单 2 的代码，在 Firefox 浏览器中，从查询页面跳转到结果页面后，点击浏览器回退按钮，我们希望被回退到查询页面后，提交按钮是正常显示的，但事实是提交按钮被沙漏图片所替换，也就是无法再进行重新查询的操作。
为了寻找问题，我们可以把清单 1 的代码在 Firefox 中执行一下回退的步骤，来排除是否是因为兼容 IE 浏览器的代码破坏了 Firefox 下的效果。
当我们拿清单 1 的代码执行完之后，发现提交按钮在点击了浏览器回退之后是正常显示的，于是说明清单 2 的代码对 Firefox 中的效果造成了破坏，所以我们可以使用判断浏览器类型的方式对清单 2 的代码再次进行修改。如果是 IE 浏览器，就执行 setTimeout 这条语句，对于其它浏览器则不执行。如清单 3：
清单 3
function validation() {
getId("submit_btn").style.display="none";
getId("wait_tip").style.display="";
if(navigator.userAgent.indexOf("MSIE")>0){
setTimeout(function(){getId("loading_img").src=getId("loading_img").src}, \
10);
}
else{
getId("loading_img").src="images/loading.gif";
}
return true;
}
}
在线生成沙漏图标
对于网站内容加载时的等待，给出一个状态提示绝对是一个明智的做法。当我们需要用到一个跟网站风格匹配的沙漏（Loading 状态）图标时，而又无法找到专门的美工设计人员，可以借助在线的沙漏图标生成工具，它们不仅提供了各种的样式，而且可以自定义尺寸、颜色甚至播放的速度等参数。这里为大家提供三款比较优秀的站点：
- Preloaders.net: Preloaders.net
- ajaxload.info: ajaxload.info
- loadinfo.net: loadinfo.net
相关文章
- Web开发：URL编码与解码
- 5个开源聊天应用程序
- HTML的15个最佳实践
-
追踪时间的10个给力应用程序 - 请谨慎对待应用程序的图标和名称
-
15个强大的iPad应用程序 - 网易邮箱前端Javascript编码规范：类规范
- 网易邮箱前端Javascript编码规范：基础规范
- Mozilla技术布道者给Web开发人员推荐的Firefox插件列表
-
前端工程师面试问题列表
Web 应用程序中提交表单时处理 GIF 动画的最佳实践，首发于 博客 - 伯乐在线。