如何在下拉更改事件中显示加载图像（SelectedIndexChange）

Question

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

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

    <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 中放置逻辑以从database 获取数据。

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

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