GIFの表示と非表示のベストプラクティス

-1

私は別のページの内容をdivにロードするためにボタンをクリックするページを持っています。ボタンをクリックしたときに表示したいローディングGIFがあります。また、他のページの内容がdivの「maincontent」に完全に読み込まれたときに消したいと思っています。以下は私の現在のコードです - この効果を達成するためのベストプラクティスですか？何らかの形でそれを行うより良い方法が必要だと思いますか？GIFの表示と非表示のベストプラクティス

のindex.php：

<html> 
    <head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 

    <script type="text/javascript"> 

     $(document).ready(function() { 
     $('#loading').hide(); 

     $(document).on('click', '.menu1', function(){ 
      $('#loading').show(); 
      $('.maincontent').load("1.php"); 
     }); 

     }); 
    </script> 

    <style> 
     #loading { 
     width: 100%; 
     height: 100%; 
     top: 0; 
     left: 0; 
     position: fixed; 
     display: block; 
     opacity: 0.7; 
     background-color: #fff; 
     z-index: 99; 
     text-align: center; 
     } 

     #loading-image { 
     position: absolute; 
     top: 25%; 
     left: 50%; 
     z-index: 100; 
     } 
    </style> 

    </head> 
    <body> 
    <button class="menu1">Click</button> 
    <div class="maincontent"> 
     <div id="loading"> 
     <img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." /> 
     </div> 
    </div> 
    </body> 
</html>

出典

2016-09-17 Silly Question Boy

あなたはそれぞれのローダを表示し、非表示にする.ajaxStartと.ajaxStopイベントを使用することができます。以下のスニペットを確認してください。

$(document).ready(function() { 
    $('#loading').hide().ajaxStart(function() { 
     $(this).show(); // show Loading Div 
    }).ajaxStop (function(){ 
     $(this).hide(); // hide loading div 
    }); 

    $(document).on('click', '.menu1', function(){ 
     $('.maincontent').load("1.php"); 
    }); 
});

出典

2016-09-17 14:18:18

おかげラーフルしかし、私は複数のボタンがあり、第一は、負荷のdivはAJAX要求が受け付けられていないかのようにそれが表示されていないクリックされた後に他のボタンをクリックしたとき –

GIFの表示と非表示のベストプラクティス

答えて

関連する問題