显示加载PNG在数据加载使用jquery

Question

短暂的延迟我试图在很短的时间内显示一个loading.png图形做我的查询e.t.c下面的一切完美目前工作。我只需要在产品代码被输入并且正在被检查时在td.available中获取图形加载。

任何想法？

这里是我的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);} 
       ); 
    }); 

这里是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']); 

Answer 1

一个简单的方法来做到这将是：

... 
// 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(); 
    } 
); 

Answer 2

您创建一个jQuery选择器包含加载img并将其附加到ajax代码之前的td。

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

available.append(loadingImg); 

Answer 3

为什么不使用Jquery load或ajax？ 并且在启动加载函数之前将加载图像放置在里面。