如何在ajax中添加加载效果答案

【问题标题】：How to add loading effects in ajax如何在ajax中添加加载效果
【发布时间】：2015-12-08 11:29:30
【问题描述】：

目前我有这段代码可以在每次点击时从外部 PHP 获取数据，但它显示我需要的是加载效果的一些延迟，我尝试了 jQuery fade In Slow 但它对我不起作用

$(document).ready(function() {
    $("#display").click(function() {                
      $.ajax({    //create an ajax request to load_page.php
        type: "GET",
        url: "o.php",             
        dataType: "html",   //expect html to be returned                
        success: function(response){                    
            $("#responsecontainer").fadeIn('slow').html(response); 
            //alert(response);
        }
    });
});
});

【问题讨论】：

你可以使用setTimeout函数来延迟输出。
你怎么解释呢
如果您决定使用解决方案，请依赖动画 gif 图像。你可以考虑Chimply

标签： php mysql ajax

【解决方案1】：

这样你可以减慢你的输出速度。

$(document).ready(function() {
$("#display").click(function() {                
  $.ajax({    //create an ajax request to load_page.php
    type: "GET",
    url: "o.php",             
    dataType: "html",   //expect html to be returned                
    success: function(response){                    
        setTimeout(function({
            $("#responsecontainer").fadeIn('slow').html(response)
        },100); 
    }
});
});
});

【讨论】：

【解决方案2】：

我想你可以这样尝试..

$(document).ready(function() {
      $("#display").click(function() {    
         // add loaders here
         $(".class").html('<img src="loader.gif" style="align:center;">');  
      $.ajax({    //create an ajax request to load_page.php
        type: "GET",
        url: "o.php",             
        dataType: "html",   //expect html to be returned                
        success: function(response){                    
            $("#responsecontainer").fadeIn('slow').html(response); 
            //alert(response);
        }
    });
        // make class empty
        $(".class").html('');
  });
  });

【讨论】：

【解决方案3】：

使用delay() 和queue() 方法。你甚至可以写成一行。

delay() 方法设置一个计时器来延迟队列中下一项的执行。

queue() 方法显示要在匹配元素上执行的函数队列。

$('#responsecontainer').html('<img src="loading.gif">').delay(2000).queue(function() { $(this).load('o.php'); });

【讨论】：