Web 应用程序中提交表单时处理 GIF 动画的最佳实践

标签: 程序员 Web开发 应用程序 用户体验 | 发表时间:2013-05-17 09:49 | 作者:童海波
出处:http://blog.jobbole.com

来源 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.页面效果

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

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 状态)图标时,而又无法找到专门的美工设计人员,可以借助在线的沙漏图标生成工具,它们不仅提供了各种的样式,而且可以自定义尺寸、颜色甚至播放的速度等参数。这里为大家提供三款比较优秀的站点:

相关文章

Web 应用程序中提交表单时处理 GIF 动画的最佳实践,首发于 博客 - 伯乐在线

相关 [web 应用程序 交表] 推荐:

Web 应用程序中提交表单时处理 GIF 动画的最佳实践

- - 博客 - 伯乐在线
来源 developerWorks. 简介: 在 Web 应用中的提交表单时,为了很好的用户体验或防止表单重复提交,我们通常会从请求发起那一刻开始,展示出一个动态的 GIF 图标来提示用户请求正在处理. 本文将介绍在传统的提交方式下,如何巧妙地使用 Javacript 方式来解决请求发起时 IE 浏览器下动态沙漏图标不播放的问题,以及在请求完成后点击浏览器回退按钮,Firefox 浏览器依旧显示着沙漏图标的问题.

优秀的WEB应用程序

- DayuLu - 互联网的那点事
今天我们将分享给大家一批优秀的WEB应用程序. 比如,大家可能用过在线的调色工具,Adobe也推出过在线的Photoshop软件. 这些程序或许就是未来软件程序的基础. 随着云处理和网络速度的飞速发展,这将是个好的趋势. 人们只需要一台在线的电脑就可以找到需要的应用程序,而不需要在自己电脑上安装复杂的文件.

Web应用程序的开发步骤

- xxg - 月光博客
  如今已进入了web2.0高速发展的互联网时代,各种互联网的Web应用程序如雨后春笋般出现. 那么作为一名Web开发人员,怎样去开发一款优秀的Web应用程序呢. 这个问题没有一个简单的答案,甚至那些教育机构都未必能清楚的知道. 所以,像大多数在这个领域里的web开发人员一样,我们只是通过去做,去实验才学会了这些.

提升 web 应用程序的性能

- pathfinder - IBM developerWorks 中国 : 文档库
作为 web 用户,我们知道页面加载或刷新的速度对其成功至关重要. 本文将帮助您更好地理解影响 web 应用程序性能的因素. 学习识别这些问题并且找到客户端内容的瓶颈. 探索 JavaScript、DOM、CSS 和 Dojo 小部件的性能问题. 将通过一个例子展示使用 YSlow 和 Firebug 适当调整 Dojo 小部件.

GNOME 3.2的Web应用程序模式

- fid - cnBeta.COM
有一个很酷的功能,在即将发布的GNOME 3.2 增加了创建Web应用程序的模式. 实现方式:当您浏览到一个网站,并选择“保存为Web应用程序” C 之后会被提示输入名称和图标,然后就会建立一个类似iPhone的图标:.

预防Web应用程序的漏洞

- - 月光博客
  如今的Web应用程序可能会包含危险的安全缺陷. 这些应用程序的全球化部署使其很容易遭受攻击,这些攻击会发现并恶意探测各种安全漏洞.   Web环境中两个主要的风险在于:注入——也就是SQL 注入,它会让黑客更改发往数据库的查询——以及 跨站脚本攻击(XSS),它们也是最危险的( Category:OWASP_Top_Ten_Project).

从 Web 站点到 Web 应用程序,第 1 部分: Web 站点还是 Web 应用程序?

- iworm - IBM developerWorks 中国 : 文档库
您构造的是 Web 站点还是 Web 应用程序. 一般来说,Web 站点主要提供信息,而 Web 应用程序互动性更强,但二者的界限已越来越模糊. 构造好的站点的最佳实践与构造好的应用程序的最佳实践不尽相同. 通过本文了解 Web 站点与 Web 应用程序之间真实确切的差异,然后分析您自己的站点. 以一种能帮助您改进设计和可用性的方式探索您正在管理、设计、编码的站点.

基于 HTML5 中的 Web SQL Database 来构建应用程序

- redhobor - IBM developerWorks 中国 : 文档库
HTML5 的 Web SQL Database 用本地和会话存储实现简单的对象持久化. 对于 HTML5,也许最有用的就是它新推出的“Web Storage” API. 对于简单的键值对(比如应用程序设置)或简单对象(如应用程序状态)进行存储,使用本地和会话存储能够很好地完成,但是对繁琐的关系数据进行处理的时候,它就力所不及了,而这正是 HTML5 的“Web SQL Database” API 借口的应用所在.

让您的 web 应用程序飞起来

- redhobor - IBM developerWorks 中国 : 文档库
提高您的 web 资源的性能,使它们变得更小. 您网站的访问者将可以更快地加载较小的源文件,而且您将可节省网站所用的带宽.

利用memcached构建高性能的Web应用程序

- - C++博客-牵着老婆满街逛
对于高并发高访问的Web应用程序来说,数据库存取瓶颈一直是个令人头疼的问题. 特别当你的程序架构还是建立在单数据库模式,而一个数据池连接数峰值已经达到500的时候,那你的程序运行离崩溃的边缘也不远了. 很多小网站的开发人员一开始都将注意力放在了产品需求设计上,缺忽视了程序整体性能,可扩展性等方面的考虑,结果眼看着访问量一天天网上爬,可突然发现有一天网站因为访问量过大而崩溃了,到时候哭都来不及.