我的页面上有一个下拉列表和网格。更改下拉值时,网格会刷新。绑定(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();
});
最佳答案
当然,您可以在发出请求之前显示它,并在完成后隐藏它:
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();
});
关于javascript - 如何在下拉更改事件(SelectedIndexChange)上显示加载图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36615879/