How do I show a loading image in JQuery?

Question

I am trying to show a loading image on a login page before it redirects to profile page. I am logging user through facebook api, so it takes time to show profile page and I want to show loading image until it goes to profile page. Please note that I am validating the page to itself.

My HTML is:

    <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>

My JQuery is:

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

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

When I click the facebook connect button, it doesn't show the loading image and goes to profile page if it was successful. Please help!!

Answer 1

Your issue is when you click your link, you are getting redirected immediately, so there is no time for the loader to fade in. You need to cancel the default behaviour and use AJAX:

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

I'm afraid I'm unfamiliar with Facebook's API, unfortunately, but you should be able to find what you need in their Developer site: https://developers.facebook.com