尽快显示隐藏加载程序隐藏

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。