Question

我有这个来自互联网的脚本，对我来说很好。唯一的问题是我想添加一个加载图像，一旦字段被更改就会出现，并且一旦从php页面检索到数据就会关闭..问题是图像不会停留（它来了又去了）数据已被检索）。请帮忙。以下是我的HTML页面

<form role="form" method="post"">

                                             <label>Amount</label>

  <input type="text" placeholder="Enter Amount" id="buyamt" name="buy">

    <span id="buymsg"></span>
                <label>EXPECTED Value</label>
 <input placeholder="Values Displays Here." id="buyvalue" readonly="" name="buyvalue">

</form>

以下是我的剧本

 <script type="text/javascript">

var pix='<img src="ajax-loader(2).gif">';

$("document").ready(function(){



$("#buyamt").change(function() {

$('#buymsg').html(pix);

$.post('chk.php',$('#buyamt').serialize(),function(display){

$('#buyvalue').val(display);},'text');

$('#buymsg').hide(pix);

});

});

</script>

Answer 1

在发布之前显示加载...，然后在返回数据后隐藏它。

$('#buymsg').html(pix);
$("#loading").fadeIn(); //show before
$.post('chk.php',$('#buyamt').serialize(),function(display){    
  $('#buyvalue').val(display);
  $("#loading").fadeOut('fast'); //hide after
},'text');

$('#buymsg').hide(pix);

<div id="loading" style="display:none;width:69px;height:89px;border:1px solid black;position:absolute;top:50%;left:50%;padding:2px;">
 <img src='loading.gif' width="64" height="64" /><br>Loading..
</div>

Answer 2

试试这个：

HTML：

<span id="buymsg">
    <img id="loading-icon" src="ajax-loader(2).gif">
</span>

JS：

function ajaxWorking() {
    $('#loading-icon').show();
}

function ajaxDone() {
    $('#loading-icon').hide();
}

$(document).ajaxStart(ajaxWorking);
$(document).ajaxStop(ajaxDone);

ajaxStart / ajaxStop是JQuery中完全相同的事件。希望它能完成任务。

如何向此ajax脚本添加加载图像

2 个答案: