顯示和隱藏加載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

謝謝Rahul但是我有一個以上的按鈕，當單擊第一個單擊後的其他按鈕時，不顯示加載div，就好像ajax請求沒有被確認 –

顯示和隱藏加載gif的最佳做法

回答

相關問題