在多部分表單上顯示加載的gif提交

Question

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

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

Answer 1

$（'＃loader'）。html =“ themes / img / loading.gif'border ='0'/>”;

這將正確插入正在加載的圖像，盡管除非您告訴jQuery使用$ .post提交表單，否則您將被帶到一個新的提交頁面，因此您將始終看不到該圖像。

Answer 2

如果您使用的是實際的內置表單提交方法，那是因為我懷疑它是在加載gif之前很早就開始加載頁面的。

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

Answer 3

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

所以我將圖像加載到div中以將其隱藏。

然后我從javascript顯示它：

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

像魅力一樣工作;）

Answer 4

同意Teja的評論。 除非您異步進行提交，否則gif顯示的真正依據是瀏覽器開始加載下一頁（或回發頁面）的速度。

如果您真的想顯示gif（雖然必須是某種描述的ajax），則可以做的是...

$("#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
    });
});

從根本上來說，盡管正如喬納斯（Jonas）和特哈（Teja）都提到的那樣，如果您不使用ajax，則用戶反饋已經存在（即，將顯示瀏覽器的“ loader gif”版本，因為它正在嘗試加載新頁面）-因此為什么要四處逛逛，只是為了在頁面上獲得加載程序gif，並使它看起來像“ Web 2.0”？

要么做ajax，要么讓瀏覽器向用戶提供視覺反饋。