0

单击链接时，我正在使用 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;
}

谢谢您的帮助。

4

4 回答 4

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();
});
于 2012-09-20T06:49:38.520 回答
0 
$('#LoadingImage').bind('ajaxStart', function(){
    $(this).show();
}).bind('ajaxStop', function(){ 
    $(this).hide();
});

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

于 2013-02-19T13:38:06.407 回答
0

像这样改变你的ajax

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


        }
    });
于 2012-09-20T03:28:56.703 回答
0

试试下面的代码

      $(document).ready(function () {            
        $('#loadingImage').hide()  // hide it initially
             .ajaxStart(function () {
                 $(this).show();
             })
             .ajaxStop(function () {
                 $(this).hide();
             });
      });
于 2012-09-20T04:52:33.527 回答