0

私は単純な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;

画像がクリックされたときにローダーがロードされ、他の画像が作成されたときに非表示になるように、コールバックを作成する方法はありますか?

4

2 に答える 2

2

使ってみる$.ajaxとsuccessコールバックです

$.ajax({
    type: "GET",
    url: 'index.php?url=' + url + '&filter=' + filter,
    success: function (image) {
        $('#result').attr('src', image);
        $('#loader').hide();
    }
});
于 2013-05-18T11:25:51.413 に答える
0

$('#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 のドキュメントを参照してください。

于 2013-05-18T11:28:06.043 に答える