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

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

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

available.append(loadingImg);

Answer 3

为什么不使用Jquery加载或ajax？在启动加载功能之前，将加载图像放入其中。

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

3 个答案: