onclick表单提交，打开jQuery加载图像，直到表单提交完成

你能提供一些建议吗？

我使用托管的SAAS CMS解决方案，使您能够使用Web应用程序系统创建基础应用程序。 我已经为会员创建了一个表单，可以将一堆图像和内容提交到他们自己的区域。 一切都很好，除非通过表单提交的图片很大，表单提交并转到感谢页面需要很长时间。 我已经在使用jQuery UI将表单分成5个步骤，并使用jQuery facebox插件进行教学弹出。

我的问题是，在提交表单时，显示加载gif（在facebox或其他建议的叠加层中）的最佳方法是什么？

谢谢你的帮助！ 插口

Answer 1

$('#myForm').bind('submit', function() { $('#ajax-loading').show() }); 

将加载图像放入id为“ajax-loading”的div中，并使用css“display：none;”

Answer 2

如果你在谈论经典表单提交（没有AJAX或任何东西），我看到两种可能性：

1. 将整个过程放入由两个框架组成的框架集中。 另一帧包含“请稍候”图标。 表单步骤使“wait”图标在提交时可见，并且每个步骤都隐藏它onload 。

2. 保持原样，只需在表单提交时显示“请稍候”图像 – 打开下一页时它将自动消失。 （但是，在提交表单后，在加载过程中，动画图像不会在某些浏览器中显示动画）。

这两个解决方案的缺点是，如果用户取消表单提交，您无法告诉它发生，因此您无法隐藏“请稍候”图标（请参阅此问题此处的问题。）这是一个未成年人问题，但它看起来仍然不是很专业。

如果可以，您可能希望切换到基于Ajax的表单提交 – 它们为您提供了更多设计交互的自由。

此外，对于文件上传，您可能希望查看基于Flash的上传器，如SWFUpload或Uploadify ，以便您显示真正的进度条等。