Анимированный GIF во время обработки скрипта - PullRequest
Новая
       2

Анимированный GIF во время обработки скрипта

1 голос
/ 14 ноября 2011

У меня есть скрипт с именем notify_me.php, который я запускаю так: 

script type="text/javascript">
    //Run notify_me.php script
    $(document).ready(function(){
      $("#submit").click(function(){
        var d = $('form').serialize();
        $.get('php/notify_me.php',d,function(data){
           $(".container").html(data);
        });
      });
    });
</script>

, и я хотел бы показать анимированную загрузку .gif, пока скрипт не будет напечатан.Код для этого: 

<div class="search_load" >
  <span class="searching_font"> Fetching your flight prices...</span><br/><br/>
  <img src="images/searchloading.gif">
</div>

Как мне написать функцию, которая показывает класс .search_load во время обработки notify_me.php.Класс .search_load также должен отображаться в .container div.

Пробовал несколько разных способов с append ();и appendTo ();но не могу заставить его работать.

Оцените вашу помощь по этому вопросу!

РЕДАКТИРОВАТЬ: я получил div .search_load, чтобы показать, когда я впервые нажал #submit.Во второй раз это не показывает все.Это проблема, которую я пытаюсь решить.Есть идеи?!

РЕШЕНИЕ: Ребята, я решил это, посмотрев на ссылку @ Rohan.Проверьте ниже.Спасибо всем! 

$(document).ready(function(){
   $("#submit").click(function(){
     $('#info').show();
     $('html,body').animate({scrollTop: $("#info").offset().top},'slow');
     $('.container').after('<div class="search_load"></div>');
     var d = $('form').serialize();
     $.get('php/notify_me.php',d,function(data){
       $(".container").html(data);
       $('.search_load').hide();
     });
   });
});

Ответы [ 5 ]

2 голосов
/ 14 ноября 2011 
$(document).ready(function(){
    $('.search_load').hide();
    $("#submit").click(function(){
        var d = $('form').serialize();
        $('.search_load').show();
        $.get('php/notify_me.php',d,function(data){
        $('.search_load').hide();
            $(".container").html(data);
        });
    });
});

Вы также можете скрыть div с помощью CSS, поэтому вы можете удалить строку # 2: $ ('. Search_load'). Hide ();

1 голос
/ 14 ноября 2011

попробуйте это: 

$('div.search_load').hide();
$('#submit').click(function() {
    $('div.search_load').show();
    var d = $('form').serialize();
    $.get('form.php', d,
    function(data) {
        $('div.search_load').hide();
        $('.container').html(data);
    },
    'html');
    return false;
});
1 голос
/ 14 ноября 2011 
jQuery(document).ready(function($) {
  $("#submit").click(function(){
    $(".search_load").show();
    var d = $('form').serialize();
    $.get('php/notify_me.php', d, function(data) {
       $(".container").html(data);
       $(".search_load").hide();
    });
  });
});
1 голос
/ 14 ноября 2011

Шаги:

  1. Сделайте загрузочный div скрытым
  2. Когда загрузка начнется, отобразите ее с помощью .show () и измените CSS так, чтобы его размещение было правильным
  3. OnLoaded -> div.hide ()

См. Это: Как показать ожидающее сообщение во время синхронизации вызова ajax в браузере

0 голосов
/ 14 ноября 2011

Попробуйте это: Javascript: 

<script type="text/javascript">
 $(document).ready(function(){
      $("#submit").click(function(){
         var d = $('form').serialize();
         $(".search_load").show();
         $.get('php/notify_me.php',d,function(data){
             $(".container").html(data);
             $(".search_load").hide();
         });
      });
 });
 </script>

HTML изменения: 

<div class="search_load" style="display:none" >
   <span class="searching_font"> Fetching your flight prices...</span><br/><br/>
    <img src="images/searchloading.gif">
</div>

Надеюсь, это сработает.

...