如何在 ajax 打开页面前添加 css 加载动画

Question

我有一个关于加载动画的问题。

如何在我的 ajax 中添加 CSS loading 动画，就像打开页面之前一样，任何人都可以在这方面帮助我？

HTML

<div id="loader"></div>

AJAX

$(".cabi").click(function(){
   $(this).css('left',($(window).width()-$(this).outerWidth())/ 2 + 'px'); 
   $(this).css('top',($(window).height()-$(this).outerHeight())/ 2 + 'px'); 
   $('body').css('overflow', 'hidden');
   event.preventDefault();
   var id = $(this).data("id");
   $.ajax({
     url: "info.php?info_id="+id,
     type: 'get',
   }).done(function(data) {
      $(".sidebar").fadeIn().find(".sidebar-content").animate({"right":0}, 200).html(data);
      imgResize(jQuery,'smartresize');   
   });

});

$(".sidebar").click(function(){
    $(".sidebar-content").animate({"right":"-565px"},200,function(){
        $(".sidebar").fadeOut(); 
        $('body').css('overflow', 'auto');  //ADD THIS  
    }) 

});
$(".sidebar-content").click(function(e){ 
    e.stopPropagation();

});

Answer 1

首先，确保#loading必须是display:none;，然后只需在 $.ajax(); 中添加 beforeSend 方法，就像这样：

$.ajax({
    url: "info.php?info_id="+id,
    type: 'get',
    beforeSend: function(){
       $("#loading").fadeIn(100);
    },
}).done(function(data) {
   $("#loading").fadeOut(100);
   $(".sidebar").fadeIn().find(".sidebar-content").animate({"right":0}, 200).html(data);
   imgResize(jQuery,'smartresize');   
});

访问jqueryajax文档http://api.jquery.com/jquery.ajax/

希望有所帮助。

如何在 ajax 打开页面前添加 css 加载动画

How to add css loading animation in ajax beforeopen page

css

ajax

jquery