CODEWITHSUNDEEP
jquery
StudioTime
StudioTime

Reputation: 23989

Hide loader hides as soon as shown

I am using simple jquery to show and hide a loader but because there is no callback as such its hiding as soon as showing. Here's the code, will comment it to explain flow:

$('#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

});

As you can see the image is generated from a call to another php page, which outputs the image after processing like this:

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

Is there a way can I make a callback up so the loader loads when image clicked and then hides when other image created.

Upvotes: 0

Views: 359

Answers (2)

Vedran Šego
Vedran Šego

Reputation: 3765

Try hiding your loader in $('#result').load() event.

$('#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
});

See more in jQuery documentation.

Upvotes: 0

Vassilis Barzokas
Vassilis Barzokas

Reputation: 3242

Try using $.ajax and it's success callback

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

Upvotes: 2

Related Questions