嗨,当页面加载新内容时,我正在尝试显示.gif。我了解Ajax、javascript、jquery,但我对如何实现这一点感到困惑。
这是带有gif的div。。。
<div id="Loading">
<div style="display: none;" id="overlay"></div>
<div id="popup" style="display:none;">
<img alt="Loading Rates" src="/Images/loading2.gif" />
<div class="dialogtext">Loading available rates, this may take a moment.</div>
</div>
</div>
</div>
以下是我写的一些JavaScript,其中一些有效:
我只是不知道如何触发这一点,希望能提供帮助或参考
所以您想在AJAX请求挂起时显示加载程序gif吗?
您可以使用的最基本的事件处理程序是
// Attach loading icon show/hide to Ajax events
$(document).on({
ajaxStart: function () {
$('#MyLoadingDiv').show();
},
ajaxStop: function () {
$('#MyLoadingDiv').hide();
}
});
只需更改父div以display: none
开始(或者只需篡改显示/隐藏调用以满足您的特定需求)
有许多这样的排列。如果您只想将加载程序附加到一个ajax调用(假设您使用了许多ajax调用,而您只需要一个加载程序),您可以执行以下操作:
var myAjaxRequest = $.ajax({
// Your ajax stuff here
beforeSend: function () { $('#MyLoadingDiv').show(); }
}
$.when(myAjaxRequest).done(function (){
$('#MyLoadingDiv').hide();
}
在我的脑海中,我认为您还应该能够将{ $('#MyLoadingDiv').show(); }
放在ajax调用之前,并在请求完成时将其隐藏起来。
如果有多个请求,您可能需要对上面的代码进行一些修改,以达到以下效果:
var myAjaxRequests = []
myAjaxRequests.push($.ajax({
// Your ajax stuff here
beforeSend: function () { $('#MyLoadingDiv').show(); }
});
$.when.apply($, myAjaxRequests).done(function (){
$('#MyLoadingDiv').hide();
}
apply()
的目的只是将数组拆分为单独的参数。如果您只使用几个Ajax请求,您可能不需要数组,您可以将它们全部传入,但对于较大的数量,这很好。
我刚刚在浏览器中删掉了这段代码,所以可能会有一些小错误,但它与我用来完成的(我认为)正是你想要的功能类似。