Отображение сообщения об ожидании при отправке длинных запросов Javascript

Я хотел бы показать анимированный GIF после нажатия кнопки формы.

ОБНОВЛЕНИЕ: я нашел решение здесь: http://www.corelangs.com/css/box/fulloverlay.html

Я комбинировал это с анимированным GIF (вместо формы входа), чтобы получить эффект, который я хотел.

Я использовал метод.show() в моем скрипте так:

$(document).ready(function () {  
    $("#my_submit").click(function(e) { 
        console.log("please wait...");
        $( "#processing_gif" ).show();
        $( "#cover" ).show();

В своей форме я использовал эти div:

        <div id="processing_gif"></div>
        <div id="cover"></div>

И я использовал этот CSS:

#processing_gif {
   position:fixed; 
   top:0; 
   left:0; 
   z-index:999; 
   width:100%;
   height:100%;
   opacity:0.8;
   background: url('/files/animation_processing.gif') center center no-repeat; 
   display:none;
}

#cover{ 
  position:fixed; 
  top:0; left:0; 
  background:rgba(256,256,256,0.9); 
  z-index:1; 
  width:100%; 
  height:100%; 
  display:none; 
}

Вот полный оригинальный урок:

<!DOCTYPE html> <html > <head> <style type="text/css"> .button { width: 150px; padding: 10px; background-color: #FF8C00; box-shadow: -8px 8px 10px 3px rgba(0,0,0,0.2); font-weight:bold; text-decoration:none; } #cover{ position:fixed; top:0; left:0; background:rgba(0,0,0,0.6); z-index:5; width:100%; height:100%; display:none; } #loginScreen { height:380px; width:340px; margin:0 auto; position:relative; z-index:10; display:none; background: url(login.png) no-repeat; border:5px solid #cccccc; border-radius:10px; } #loginScreen:target, #loginScreen:target + #cover{ display:block; opacity:2; } .cancel { display:block; position:absolute; top:3px; right:2px; background:rgb(245,245,245); color:black; height:30px; width:35px; font-size:30px; text-decoration:none; text-align:center; font-weight:bold; } </style> </head> <body> <div align="center"> <br><br><br><br> <a href="#loginScreen" class="button">Click here to Log In</a> </div> <div id="loginScreen"> <a href="#" class="cancel">&times;</a> </div> <div id="cover" > </div> </body> </html>
Источник

2 ответа

Решение

Вы можете просто добавить $("my_image_selector"). Show() перед $.ajax(params) и скрыть его при появлении "success" или "error", добавив туда $("my_image_selector"). Hide()

Или вы можете использовать.ajaxStart и.ajaxStop. см. документы JQuery

Источник

Ах jquery - вздох. Вам нужно будет настроить это, чтобы получить желаемый стиль / презентацию, но я собираюсь указать вам общее направление, используя старый добрый JavaScript.

  1. Добавьте изображение с тегом GIF, который вы хотите использовать на странице, где вы хотите его

      < img src='loading.gif'/>

  2. Добавьте идентификатор и "display:none" к стилю изображения, чтобы скрыть его

    <img id='loadingImg'  style='display:none;' src='loading.gif'/>

  3. избавьтесь от обработчика onclick в теге кнопки submit и вместо этого поместите код, подобный этому, ниже формы

     <script>
       //listen for click on your button
       document.getElementById('add-all-to-cart').addEventListener('click',
           function(event){
                //this is the code that runs when the button is clicked
                //get the button we clicked on
                var target=event.target||event.srcTarget;
                //set that button to disabled
                target.disabled=true;
                //display the loading image
                document.getElementById('loadingImg').style.display='block';  
            }

</script>
Источник
Другие вопросы по тегам