Question

我有这个ajax电话：

$('.ajaxtrigger2').click(function(){
$('#target').load('xxx.html');
...

如何在此简单调用期间附加加载消息或图像？ THX

Answer 1

创建另一个元素，例如

<div id="loading" style="display: none">Loading...</div>
<div id="target"></div>

然后在开始加载时显示加载元素，并在通过load回调完成后隐藏它。

$('.ajaxtrigger2').click(function() {
    $("#loading").show();
    $("target").load('xxx.html', function() { 
        $("#loading").hide();
    });
}

Answer 2

创建一个Img，使id等于'loading'，并具有默认样式，如“display：none;”然后将其添加到您的jQuery onReady事件

$("#loading").ajaxStart(function () { $(this).show(); }).ajaxStop(function () { $(this).hide(); });

Answer 3

我个人喜欢使用css，并添加删除内容。

<style>
 #target.loading {background image you want, alongside some greying or whatever}
</style>
<script>
....
$('.ajaxtrigger2').click(function(event){
$('#target').addClass("loading");
$('#target').load('xxx.html', function(data,text,xhr){
    $('#target').removeClass("loading");
});
});
...
</script>

Answer 4

有两种方法。我首选的方法是将一个函数附加到元素本身的ajaxStart / Stop事件上。

$('#loadingDiv')
    .hide()  // hide it initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    })
;

只要进行任何ajax调用，就会触发ajaxStart / Stop函数。

Ajax加载gif在调用期间附加

4 个答案: