loading GIF image while navigating

Question

is there any way that loading GIF image while onclick and simultaneously, navigation should happen.

i tried using jquery but loader animations are not happening while page navigates in some mobile browser, is there a solution using ajax to overcome that problem?

Answer 1

The best way to do is is to use AJAX to load new content. What you can do is have a button which when clicked clears the html of the initial page and reloads content for the other html page.

Lets say you have the page's HTML contents in a div called #div and there's a button called #button which when clicked takes you to the new page. What you can do now is that whenever #button is clicked, you can clear the HTML contents of the current div, load the HTML of the new page (and while it loads you can display the GIF image) and then populate the div with the HTML of the new page.

$("#button").click(function() {

   //till the time the post function below doesn't return the following image will be displayed     
   $("#div").html('<img src = "images/ajax-loader.gif" />');

   $.post("get_html.php", function (data) {

    //get the new HTML content
    $("#div").html(data);

   });


});

This is just an example, if you are more specific in what you need, maybe I could write code suited to your needs.