0

リンクがクリックされたときに、jqueryajaxを使用して別のページをモーダルウィンドウにロードしています。モーダルコンテンツの読み込み中に、表示される読み込み画像があります。読み込み中の画像はページの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();

また、ajaxSuccessの代わりに、ajaxComplete関数を試してdivを非表示にしてみませんか。

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

機能を開始および停止するためにバインドしてみてください...

于 2013-02-19T13:38:06.407 に答える