Question

我正试图解决这个问题，而我所阅读的帖子似乎都没有为我解答。

我正在制作.load调用并将数据库响应定位到一个div类别为＆＃34;内容＆＃34;

当我使用以下内容时，会出现我的加载gif：

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

但是，我的服务器很快响应了succesfful ajax调用，而.load以毫秒为单位显示内容。我希望暂停2秒钟，显示加载挖掘然后显示内容。

如何实现这一目标？

Answer 1

两个选项。

尝试使用delay（）函数 - 它会延迟执行而不是处理/结果。
```
$( "#container" ).load( "content.txt").delay(2000);
```

隐藏内容并使用setTimeout显示它们。这些方面的东西：

$( "#container" ).hide();

$( "#container" ).load( "content.txt", function( response, status, xhr ) {
   if ( status == "success" ) {
     setTimeout(function() {
       $( "#container" ).show('slow');
     }, 3000);
   }
});

我会使用后者。

Answer 2

这是使用延迟的好时机。假设你正在使用jQuery：

var twoSecondWait = $.Deferred();
$('#loading-image').show();
// ajax calls in jQuery return promises
var ajaxLoadImage = $.ajax(/* options */{});
setTimeout(function() {
  twoSecondWait.resolve();
}, 2000);

$.when(ajaxLoadImage, twoSecondWait, function(loadImageResponse) {
  $('#loading-image').hide();
});

这将等待至少2秒，如果ajax调用花费的时间超过两秒，则ajax返回成功后会立即显示。

Answer 3

首先将加载图像设置到您的页面，然后在文档启动时使用jquery隐藏它，然后在ajax调用中显示它。

在jquery中尝试这个：

$("#loading").hide();                        // hiding loading img at document start  

$(".btnSignin").click(function () {

    $("#loading").show();                    // its jpg or gif loading image
    $.ajax({
        url: "url",
        data: mydata
        type: "post",
        success: function (result) {
        $("#loading").hide();            // now the call succeeded so no need to show loading img
        }
    });

});

显示AJAX加载图像至少2秒钟

3 个答案: