Question

我在提交ajax请求时尝试显示加载GIF文件。以下是我的代码，任何人都可以指出我做错了什么？我希望只要按下该按钮，它就会显示加载GIF，直到数据从服务器返回。

非常感谢任何帮助。

HTML

<div class="page-header">
<div class="loader" id="loader" style="display:none"></div> 
<div class="blog">
<input type="submit" value="Creat Jobs" id="createJobsButton"/>
<div id="resuls"></div>
</div>
</div>

CSS

   .loader{
   position:absolute;
   top:0;
   left:0;
   width:100%;
   height:100%;
   background:rgba(255,255,255, .8)url('../img/ajax-loader.gif') no-repeat 50%
   }

JAVASCRIPT

$(document).ready(function(){

            $('#createJobsButton' ).click( function() {
                $('#loader').css('display', 'show');

                $.post( "services.php", {},
                    function( data ) 
                    {
                    $('#resuls').append(data);
                    $('#loader').css('display', 'none');
                    }
                );
            });
        }
        );

Answer 1

改变这个：

$('#loader').css('display', 'show');

到

$('#loader').css('display', 'block');

display没有展示价值。

Answer 2

实现此目标的最简单方法是使用ajaxStart和ajaxStop

注册第一个Ajax请求开始时要调用的处理程序：

 $( document ).ajaxStart(function() {
     $( "#loader" ).show();
 });

注册所有Ajax请求完成时要调用的处理程序：

 $( document ).ajaxStop(function() {
     $( "#loader" ).hide();
 });

显示/隐藏加载GIF无法正常运行

2 个答案: