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

Question

你可以提供一些建议。

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

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

感谢您的帮助！ 杰克

Answer 1

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

把你的加载图像ID为“阿贾克斯加载”一个div内使用CSS“显示：无;”

Answer 2

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

1. 把整个过程分为由两帧的框架。另一个框架包含“请稍候”图标。表单步骤使“等待”图标在提交时可见，并且每个步骤都将其隐藏起来onload。

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

这两种解决方案都有其缺点是，如果用户取消表单提交，你有没有办法来告诉它发生了，你无法隐藏“请稍候”图标（请参阅本我的问题问题here。）这是一个小问题，但它看起来并不专业。

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

另外，对于文件上传，您可能希望查看基于Flash的上传程序，如SWFUpload或Uploadify，这些程序使您可以显示真正的进度栏等等。