Лучшая практика для отображения и скрытия загрузки gifs

-1

У меня есть страница, на которой я нажимаю кнопку, чтобы загрузить содержимое другой страницы в div. У меня есть загрузочный gif, который я хочу отображать, когда я нажимаю кнопку, и, конечно, я бы хотел исчезнуть, когда содержимое другой страницы полностью загрузилось в div-maincontent. Ниже мой текущий код - это лучшая практика для достижения этого эффекта - почему-то я думаю, что должен быть лучший способ сделать это?Лучшая практика для отображения и скрытия загрузки gifs

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 не подтверждаемого –

Лучшая практика для отображения и скрытия загрузки gifs

ответ

Смежные вопросы