javascript - 我如何在执行 jquery success() 之前显示 GIF 加载图像

标签 javascript jquery gif

<分区>

我正在用大量数据更新我的表单,因此我需要设置加载 GiF 图像,以便用户可以了解数据正在插入到数据库中。

我正在使用以下 jquery。你们能告诉我如何在执行 success() 之前显示此加载图像吗?

loadubg.gif(这是我的加载图像)

$('body').on('click', '#upload', function(e){
    e.preventDefault();
    var formData = new FormData($(this).parents('form')[0]);

    var cid=$('#cdid').val();



    $.ajax({
        url: 'editContactDetails.php',
        type: 'POST',
        xhr: function() {
            var myXhr = $.ajaxSettings.xhr();
            return myXhr;
        },
        success: function(data){                    
          // getDetails(cid);
          $("#success").html(data);
            document.getElementById("all_contact_details").reset();


        },
        data: formData,
        cache: false,
        contentType: false,
        processData: false
    });
});    

最佳答案

使用AjaxStartAjaxComplete回调:

$( document ).ajaxStart(function() {
  $( ".loading" ).show();
});

$( document ).ajaxComplete(function() {
  $( ".loading" ).hide();
});

如果您不想要全局回调,您可以将它们放入 $.ajax 调用中:

$.ajax({
    ...
    beforeSend: function(){$( ".loading" ).show();},
    complete: function(){$( ".loading" ).hide();}
    ...
});

此外,其他人都建议您在 success 处理程序中隐藏 gif。这是不正确的。如果 ajax 调用导致错误,您的 gif 将继续旋转。 complete 处理程序是执行此操作的正确位置。

关于javascript - 我如何在执行 jquery success() 之前显示 GIF 加载图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24118417/

相关文章:

javascript - react 形式 : How to add error message that disappear if the input was typed in

android - 使用动画 gif 和电影时 Activity 崩溃 (Android)

php - gif 加载器作为顶层居中

linux - ImageMagick - 使用转换命令将半页上的 GIF 转换为 PDF 肖像(字母)

javascript - 为什么代码示例中 `this`没有指向js全局作用域

javascript - 观察数组的子值

javascript - 交换 jquery 数据表的行

javascript - 如何从异步调用返回响应?

javascript - 更新推特状态

javascript - 无法让 Bootstrap javascript 工作?