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，這些程序使您可以顯示真正的進度欄等等。