jQuery ajax加载图像不隐藏答案

【问题标题】：jQuery ajax loading image not hidingjQuery ajax加载图像不隐藏
【发布时间】：2013-12-02 23:32:48
【问题描述】：

单击链接时，我正在使用 jquery ajax 将单独的页面加载到模式窗口中。在加载模式内容时，我有一个显示的加载图像。加载图像位于页面上的一个 div 中，并针对页面上的任何 ajax 加载显示。这一切正常，但我似乎无法在 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;
}

感谢您的帮助。

【问题讨论】：

我会说最好使用 ajaxComplete
刚刚用 ajaxComplete 试了一下，也没用。

标签： jquery ajax image loading

【解决方案1】：

ajaxStart 和 ajaxStop 是全局函数。所以他们响应页面上的任何 ajax 请求。与其在这些函数中显示/隐藏，为什么不在 beforeSend 和 complete 函数中做同样的事情。这样可以确保图像在正确的时间显示/隐藏

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，而不是 ajaxSuccess..

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

【讨论】：

刚刚试过了，还是不行。就像您指出的那样，我希望这是一个全局函数。对于页面上的任何 ajax 请求，我希望此图像显示/隐藏。
我清除了 Firefox 中的缓存，这一切正常。但是，它在 Chrome 或 Safari 中不起作用。浏览器有什么不同的处理方式吗？
所以我根据@sushanth 的回答做了一些重新排列，让它在所有浏览器中都能正常工作。与上面的答案唯一不同的是，我没有使用 complete，而是将 $loader.hide 添加到了成功函数中。感谢您的帮助。
当然.. 没问题。但是完整添加它确保它在成功功能完成后隐藏

【解决方案2】：

像这样改变你的ajax

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


        }
    });

【讨论】：

【解决方案3】：

试试下面的代码

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

【讨论】：

刚刚试了下，还是没有隐藏加载器。

【解决方案4】：

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

尝试将其绑定到启动和停止功能...

【讨论】：