儘快顯示隱藏加載程序隱藏

Question

我正在使用簡單的jquery顯示和隱藏加載程序，但因爲沒有回調，所以一旦顯示就隱藏回調。下面的代碼，會評論它來解釋流量：

$('#test img').click(function(e) { // image is clicked 

    $('#loader').show(); // show loader 
    e.preventDefault(); 
    $(this).css('opacity', 1); 

    var url = $('input[name=url]').val(); 

    var filter = $(this).data('filter'); 
    $('input[name=filter]').val(filter); 

    // get image as a result of a call to another page 
    $('#result').attr('src', 'index.php?url=' + url + '&filter=' + filter); 

    $('#loader').hide(); // hide loader 

}); 

正如你所看到的是從到另一個PHP頁面，該頁面的圖像處理後，輸出這樣的調用生成的圖像：

$output = 'http://myurl.com/filter/' . $filename; 
header('Location: ' . $output, TRUE, 301); 
die; 

有沒有一種方法可以進行回調，使加載器在單擊圖像時加載，然後在創建其他圖像時隱藏。

Answer 1

嘗試使用$.ajax和它的success回調

$.ajax({ 
    type: "GET", 
    url: 'index.php?url=' + url + '&filter=' + filter, 
    success: function (image) { 
     $('#result').attr('src', image); 
     $('#loader').hide(); 
    } 
}); 

Answer 2

試着隱藏您的裝載機在$('#result').load()事件。

$('#test img').click(function(e) { // image is clicked 

    $('#loader').show(); // show loader 
    e.preventDefault(); 
    $(this).css('opacity', 1); 

    var url = $('input[name=url]').val(); 

    var filter = $(this).data('filter'); 
    $('input[name=filter]').val(filter); 

    // get image as a result of a call to another page 
    $('#result').attr('src', 'index.php?url=' + url + '&filter=' + filter); 
}); 

$('#result').load(function(e) { 
    $('#loader').hide(); // hide loader 
}); 

查看更多的jQuery documentation。