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

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

1 个答案: