jquery - 如何在 JQuery 中显示加载图像？

Question

我试图在登录页面重定向到个人资料页面之前显示加载图像。我正在通过 facebook api 记录用户，因此需要时间来显示个人资料页面，并且我想显示加载图像，直到它进入个人资料页面。请注意，我正在验证页面本身。

我的 HTML 是:

    <div>
     <a id="facebookLogin" class="fbButton" href="' . $loginUrl . '"><img src="f-connect.png"></a><br>';
    </div>

<div id='loadingmessage' style='display:none'>
  <img src='loading.gif'/>
</div>

我的 JQuery 是:

$( document ).ready(function( $ ) {

            $('#facebookLogin').live('click', function() {
                        $('#loadingmessage').fadeIn(); 
                }); 
        });

当我单击 facebook 连接按钮时，它不会显示加载图像，如果成功，则会转到个人资料页面。请帮忙!!

Answer 1

您的问题是，当您单击链接时，您会立即重定向，因此加载程序没有时间淡入。您需要取消默认行为并使用 AJAX:

$(document).on('click', '#facebookLogin', function(e) {
        e.preventDefault();
        $('#loadingmessage').fadeIn(); 
        $.ajax({
         type: "POST",
         url: FACEBOOKAPIURL,
         data: SOMELOGINDATA,
         success: function(){ $('#loadingmessage').fadeOut(); }
    });
});

不幸的是，我恐怕不熟悉 Facebook 的 API，但您应该能够在他们的开发者网站中找到您需要的内容:https://developers.facebook.com