如何在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连接按钮时，如果连接成功，它不会显示正在加载的图像并且会直接跳转到个人资料页面。请帮忙解决！！

- user3293145

---

你使用的jQuery版本是什么？“live”已经过时了一段时间。请改用“on”。 - putvande

我正在使用1.8.23版本，我尝试了你的解决方案，但仍然不起作用。如果我使用警报，它将在“live”上工作，但代码仍然无法正常工作。 - user3293145

尝试使用.show()而不是.fadeIn()，这样就可以立即显示。由于导航已经开始，浏览器可能不允许动画完成。 - Jonathan Lonowski

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

- Mister Epic

---

它不起作用。当我尝试您的代码时，Facebook按钮甚至都无法工作，但是当我尝试替换文档并放置选择器时，它像以前一样工作，而不显示加载图像。 - user3293145

这段代码实际上不会起作用，因为我不知道如何通过Facebook的API进行登录，因此您需要研究一下或者在SO上提出另一个问题。这段代码将停止链接工作，这是预期的，并且随后会弹出加载消息。之后，您必须发现如何通过AJAX与Facebook进行身份验证，一旦身份验证成功，您可以执行诸如淡出加载消息或重定向到另一页之类的操作。 - Mister Epic

谢谢您的回答，我会尝试看看是否可以通过AJAX验证Facebook。 - user3293145