Question

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

感谢您的帮助。

Answer 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();

也代替ajaxSuccess为什么不尝试使用ajaxComplete函数隐藏你的div ..

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

Answer 2

像这样更改你的ajax

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


        }
    });

Answer 3

尝试以下代码

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

Answer 4

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

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

jQuery ajax加载图片没有隐藏

4 个答案: