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中查看更多内容。

隐藏加载程序会在显示后立即隐藏

2 个答案: