如何在AJAX請求期間顯示加載圖像？

Question

我加載在與這個jQuery代碼的幫助下div另一頁：

$('#maildiv').load('reports/mail_report.php'); 

的負載服用一段時間。同時我想展示一個加載圖片。加載文件信息時，應該隱藏加載圖像。

我該怎麼做？

我嘗試：

function mail() { 
    $("#mailimg").show(); 
    $('#maildiv').load('reports/mail_report.php') { 
     $("#mailimg").fadeOut("10000"); 
     $('#maildiv').fadeOut("10000"); 
    } 
} 

<input type="button" class='button green' value="Mail Report" name="" id="" Onclick='mail();return false;'/> 
<img id="mailimg" style='display:none;' src='img/loading.gif' width='20' height='20'>  
<div id="maildiv" style="color:red;"> </div> 

Answer 1

使用.load（）完成回調隱藏負荷圖像。

另一點是加載的div maildiv，爲什麼要用$('#maildiv').fadeOut("10000")來隱藏它。我認爲您需要使用展示$('#maildiv').fadeIn("10000")

function mail() { 
    $("#mailimg").show(); 
    $('#maildiv').load('reports/mail_report.php', function() { 
     $("#mailimg").fadeOut("10000"); 
     $('#maildiv').fadeOut("10000"); 
    }) 
} 

Answer 2

您的負載調用是錯誤的。

function mail() 
{ 
    $("#mailimg").show(); 
    $('#maildiv').load('reports/mail_report.php', function(response, status, xhr) 
    { 
     $("#mailimg").fadeOut("10000"); 
     $('#maildiv').fadeOut("10000"); 
    }); 

} 

Answer 3

這是通用的，應該解決這個問題。

//Do what you have to before its starts 
$('#whereitstobeloads').load('filethatstobeloaded', function() { 
    //What you want to do when its loaded 
}); 

Answer 4

看起來您已經有了正確的想法 - 使用load的回調函數 - 但是您的語法不正確。試試這個：

function mail() { 
    $('#mailimg').show(); 
    $('#maildiv').load(
     'reports/mail_report.php'), 
     function() { 
      $('#mailimg').fadeOut("10000"); 
      $('#maildiv').fadeOut("10000"); 
     } 
    } 
} 

Answer 5

試試這個：

function mail() { 
    $("#mailimg").css('display','block'); 
    $('#maildiv').load('reports/mail_report.php', function(){ 
    $('#mailimg').animate({ 
     opacity: 0.0 
     }, 1000, 'linear', function(){ 
      $('#maildiv').animate({ 
        opacity: 1.0 
        }, 1000, 'linear'); 
     }); 
    }); 
}