javascript - 如何在下拉更改事件(SelectedIndexChange)上显示加载图像

Question

我的页面上有一个下拉列表和网格。更改下拉值时，网格会刷新。绑定(bind)到网格的数据是从数据库中获取的。当我更改下拉值时，我应该能够看到加载屏幕上的图像。加载数据后，加载图像应该消失。我将如何实现这一点？任何建议都会有帮助..

下面是我用于提交点击的代码。我应该如何修改它以处理下拉更改事件。

    <script type="text/javascript">
    function ShowProgress() {

            setTimeout(function () {

                var modal = $('<div />');
                modal.addClass("modal");
                $('body').append(modal);
                var loading = $(".loading");
                loading.show();
                var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
                var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
                loading.css({ top: top, left: left });
            }, 200);
        }

$('form').live("submit", function () {
    ShowProgress();
});

Answer 1

当然，您可以在发出请求之前显示它，并在完成后隐藏它:

HTML:

<div id='loading-image'>
  <img src='loadinggraphic.gif'/>
</div>

脚本:

$('#loading-image').show();
$.ajax({
      url: 'data.php',
      cache: false,
      success: function(data){
        $('.info').html(data);
      },
      complete: function(){
        $('#loading-image').hide();
      }
    });

在这里，在 data.php 中，您可以放置​​从数据库获取数据的逻辑。

我通常更喜欢将其绑定(bind)到全局 ajaxStart 和 ajaxStop 事件的更通用的解决方案，这样它就会显示在所有 ajax 事件中:

$('#loading-image').bind('ajaxStart', function(){
    $(this).show();
}).bind('ajaxStop', function(){
    $(this).hide();
});