Как показать загрузочное изображение в 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(); } 
    }); 
}); 

I Я боюсь, что я незнаком с API Facebook, к сожалению, но вы сможете найти то, что вам нужно на своем сайте для разработчиков: https://developers.facebook.com