jQuery ajax加载图像不隐藏

我正在使用jquery ajax在单击链接时将单独的页面加载到模式窗口中。当模式内容加载时，我有一个显示的加载图像。加载图片位于页面上的div中，并显示页面上的任何ajax加载。这一切都正常工作，但我似乎无法让图像隐藏在ajax调用成功后。jQuery ajax加载图像不隐藏

这里是我使用jQuery：

$('#loadingImage').ajaxStart(function(){ 
    $(this).show(); 
}); 
$('#loadingImage').ajaxSuccess(function(){ //also tried ajaxStop 
    $(this).hide(); 
}); 

function loadMap(){   
$('#whereweare-map').click(function(){ 
    $('#lightBox').removeClass().addClass('reveal-modal expand'); 
    $.ajax({ 
     url: '/Map#mapLoad', 
     success: function(data){ 
      $('#lightBox').reveal(); 
      $('#lightBoxContent').html(data);   
     } 
    }); 
     return false; 
     }); 
    } 
loadMap();

HTML：

<div id="imageLoading"></div> 
<a href="#" id="whereweare-map">Where We Are</a> 
<div class="reveal-modal" id="lightBox"> 
    <div id="lightBoxContent"><!-- Load Content Here --></div> 
    <a class="close-reveal-modal">&#215;</a> 
</div>

而CSS：

#loadingImage { 
display:none; 
height:84px; 
width:84px; 
position:fixed; 
top:50%; 
left:50%; 
z-index: 1; 
background: url('preloader.gif') no-repeat center center; 
background-color: #000; 
background-color: rgba(0, 0, 0, 0.7); 
-moz-border-radius:45px; 
-webkit-border-radius:45px; 
border-radius:45px; 
}

感谢您的帮助。

来源

2012-09-20 eCamK

我会说这是更好地使用ajaxComplete – Felix

刚试过用ajaxComplete，它也没有工作。 – eCamK

ajaxStart和ajaxStop是全球性的功能。所以他们回应页面上的任何ajax请求。相反，呈现出/隐藏在这些功能你为什么不这样做的beforeSend，功能齐全..这可以确保图像显示/隐藏在正确的时间。另外的ajaxSuccess为什么不是

function loadMap() { 
    $('#whereweare-map').click(function() { 
     var $loader = $('#loadingImage'); 
     $('#lightBox').removeClass().addClass('reveal-modal expand'); 
     $.ajax({ 
      url: '/Map#mapLoad', 
      success: function (data) { 
       $('#lightBox').reveal(); 
       $('#lightBoxContent').html(data); 
      }, 
      beforeSend : function(){ 
       $loader.show(); 
      }, 
      complete : function(){ 
       $loader.hide(); 
      } 
     }); 
     return false; 
    }); 
} 
loadMap();

你不尝试ajaxComplete功能隐藏DIV ..

$('#loadingImage').ajaxComplete(function(){ //also tried ajaxStop 
    $(this).hide(); 
});

来源

2012-09-20 06:49:38

刚试过这个，它仍然无法正常工作。就像你指出的那样，我希望这是一个全球性的功能。对于页面上的任何ajax请求，我希望此图像显示/隐藏。 – eCamK

我清除了Firefox中的缓存并且这个工作正常。但是，它在Chrome或Safari中不起作用。浏览器处理这种情况的原因是什么？ – eCamK

所以我根据@sushanth的答案做了一些重新安排，并让它在所有浏览器中都能正常工作。唯一不同于上述答案的是，我没有使用complete，而是将$ loader.hide添加到成功函数中。谢谢您的帮助。 – eCamK

更改你的Ajax这样

$.ajax({ 
     url: '/Map#mapLoad', 
     success: function(data){ 
      $('#lightBox').reveal(); 
      $('#lightBoxContent').html(data);   
      $('#loadingImage').hide(); //hide it here 


     } 
    });

来源

2012-09-20 03:28:56 coolguy

尝试了您的建议，但仍然无法使用。 – eCamK

尝试下面的代码

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

来源

2012-09-20 04:52:33 Developer

刚刚尝试过，它仍然没有隐藏装载机后。 – eCamK

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

尝试结合它来启动和停止功能...

来源

2013-02-19 13:38:06 Legolas

jQuery ajax加载图像不隐藏

回答

相关问题