在使用jquery加载数据时，在短延迟中显示加载png

I am trying to display a loading.png graphic in the very short time it takes to do my query e.t.c Everything below works perfectly currently. I just need to get the graphic loading in the td.available only when the productcode has been entered and is being checked.

Any ideas?

Here is my JS

$("#prodcodecheck").blur(function() {
        var $this = $(this);
        $this
            .closest('tr') // find the parent tr
            .find('td.available') // find the imgsample in the row
            .html( $(this).attr('id')) // update the contents
            //.animate({'opacity':1},200);

        var available = $this.closest('tr').find('td.available')

        $.post('checkstock.php', //this page reads the image code and gives you the image location
                 { action: 'searchimage', productcode: $(this).val() },
                function(data) {available.html(data);}
                );
    });

And here is checkstock.php

//Find Stock Value
function checkstock($prodCode) { 

  $prodCode = strtoupper($prodCode);

  require '../../../../config.php';
  $dbh = new PDO(DB_DSN, DB_USER, DB_PASS);
  $sql = "SELECT * FROM isproducts WHERE prodCode = '".$prodCode."'"; 
  $stmt = $dbh->query($sql);
  $obj = $stmt->fetch(PDO::FETCH_OBJ);

  $count = $stmt->rowCount();

  echo ($count == 1 ? 'The current stock value of item '.$obj->prodCode.' is '.ROUND($obj->FreeStockQuantity, 0).'' : 'Invalid product code');  

}

//Call Stock Function
checkstock($_POST['productcode']);

A simple way to do it would be:

...
// reveal a 'loading' div/span or whatever right before the request
$("#loading").show();
$.post('checkstock.php', { action: 'searchimage', productcode: $(this).val() },
    function(data) {
        available.html(data);

        // hide it again once the request has completed
        $("#loading").hide();
    }
);

You create a jQuery selector that contains the loading img and append it to the td before the ajax code.

var loadingImg = $('<img src="/assets/images/loading.gif">');

available.append(loadingImg);

Why don't you use Jquery load or ajax? And before launching the load function place the loading image inside.