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

Question

你能提供一些建议。

我使用的托管SAAS CMS解决方案可让您使用网络应用系统创建基础应用。我已经为会员创建了一个表单，可以将一堆图像和内容提交到他们自己的区域。一切都很好，除非通过表单提交的图片很大，表单提交并转到感谢页面需要很长时间。我已经在使用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. 将整个过程放入由两个帧组成的框架集中。另一帧包含“请稍候”图标。表单步骤使“等待”图标在提交时可见，并且每个步骤都隐藏它onload。

2. 保留所有内容，并在表单提交时显示“请稍候”图片 - 打开下一页时它会自动消失。 （但是，在提交表单后，动画图像在加载过程中不会在某些浏览器中显示动画。）

这两种解决方案的缺点是，如果用户取消表单提交，您无法告诉它发生，因此您无法隐藏“请稍候”图标（请参阅我在此问题上的问题{{3这是一个小问题但它仍然看起来不太专业。

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

此外，对于文件上传，您可能需要查看基于Flash的上传器，例如here或SWFUpload，以便您显示真实的进度条等。