Jquery Ajax Response As Image

Question

I have a PHP page that resizes images and it takes two variables like resize.php?width=100&height=200 and this PHP page's content-type is image/jpg.

also I have a HTML page and I'll share 2-3 line of codes from it

<img src="image.jpg" id="myImageId" />
<a onclick="myFunction(400,500);">resize it</a>

When I click resize it, it'll call myFunction function, and this function should show a loading icon while my resize.php response resizing process. When resize.php load completely, this function should

$('#myImageId').attr('src','resize.php?width=100&height=200');

do this.

How can I do this?

Answer 1

You could try something like this:

function myFunction(width, height) {
    var url = "resize.php?width=" + width + "&height=" + height;
    $('#myImageId').attr('src','loading.gif');
    $.ajax({ 
        url : url, 
        cache: true,
        processData : false,
    }).always(function(){
        $("myImageId").attr("src", url).fadeIn();
    });   
});