顯示加載gif多部分表格提交

我試圖顯示一個加載gif提交之前multipart表單（文件上傳），這是我的代碼..但圖像不顯示..如果我刪除提交（）它顯示，所以..不是一個路徑或語法問題。顯示加載gif多部分表格提交

$('#btnSubmit').click(function() { 
    document.getElementById('loader').innerHTML = "<img src='<?= url::base() ?>themes/img/loading.gif' border='0' />"; 
    $('#uploadform').submit(); 
});

來源

2010-04-26 mandril

你沒有在那裏做任何Ajax。您直接提交表單，並直接將用戶轉到下一頁。 – 2010-04-26 16:36:52

$（ '＃裝載機'）HTML =「主題/ IMG/loading.gif '邊界='。 0'/>「;

這將正確插入加載圖片，但除非您告訴jQuery使用$ .post提交表單，否則您將被帶到一個新的提交頁面，因此您將無法看到圖像。

來源

2010-04-26 16:44:00 Tim

如果你使用的是實際的內置表單提交方法，那麼這是因爲它開始加載頁面很久你的gif被加載我懷疑。

我通常使用httprequests動態構建內容，因此當我提交新請求時，我會將頁面內容更改爲加載圖像，直到收到新頁面。

來源

2010-04-26 16:36:25

我想問題是由Apache處理的圖像請求。

所以我加載圖像的div在隱藏它。

然後我表現出來的javascript：

document.getElementById('loader').style.display = "inline";

工作就像一個魅力;）

來源

2010-04-26 16:43:41 mandril

它將顯示加載圖像，直到連接到新頁面爲止，在這種情況下，它將清除舊頁面並開始在黑屏上加載新頁面。如果你想要一個在整個加載過程中持續存在的加載圖像，那麼你需要使用動態內容加載，比如ajax請求。 – 2010-04-26 16:49:29

同意Teja的評論。除非你正在異步提交，否則gif顯示是否真的基於瀏覽器開始加載下一頁（或回發頁）的速度。

你可以做什麼，如果你真的想顯示GIF（必須是一些描述阿賈克斯雖然）是...

$("#btnSubmit").click(function(e){ 
    e.preventDefault(); // stops any 'immediate' post back or re-direction 
    $("#loader").hide() 
    .html("<img src='<?= url::base() ?>themes/img/loading.gif' border='0' />") 
    .delay(1000).fadeIn(200, function(){ 
     // submit form using $.ajax or whatever suits - rebuild page on callback or navigate to new page 
    }); 
});

從根本上說，雖然作爲喬納斯和Teja公司都已經提到了，如果你沒有做Ajax - 那麼用戶的反饋信息已經存在了（比如瀏覽器的'loader gif'版本會顯示，因爲它正在嘗試加載一個新頁面） - 那麼爲什麼還要繞着房子繞過來獲得一個加載器gif在你的網頁上，讓它看起來「Web 2.0」？

要麼ajax，要麼讓瀏覽器給用戶它的視覺反饋。

來源

2010-04-26 16:49:02 LiverpoolsNumber9

回答

相關問題