脚本处理过程中的动画gif - Animated gif during script processing

Animated gif during script processing

本文关键字：动画 gif 过程中处理脚本 | 更新日期: 2023-09-27

我有一个名为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>

如何编写一个函数，在notify_me.php的处理过程中显示.search_load类。.search_lead类也应该显示在.contatordiv.中

使用append((尝试了一些不同的方法；和appendTo((；但似乎无法使其发挥作用。

感谢您在这方面的帮助！

编辑：我得到了.search_loaddiv来显示我第一次点击#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();
     });
   });
});

$(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);
        });
    });
});

您也可以用CSS隐藏div，这样您就可以删除行#2:$('.search_load'(.hide((；

步骤：

隐藏加载div
当加载开始时，使用.show((显示它，并修改CSS以使其位置正确
OnLoaded->div.hide((

请参阅：如何在浏览器中显示同步ajax调用期间的等待消息

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();
    });
  });
});

试试这个：

$('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;
});

试试这个：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>

希望这能奏效。