load gif image while loading the other page using ajax

Question

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

     $("#Videop").click(function ()
 {
     //till the time the post function below doesn't return the following image will be displayed
     tactile.page.getComponent("loadingnext").show();
     $.post("http://cloud.netbiscuits.net/1305494/SyngentaMobileStage/aspx/Video.aspx",
         function (data)
         {
             //get the new HTML content
             $("#root").html(data);
         });

 });

but how about the script files and background function calls associated with that page?

Answer 1

what I understood from your question is, to redirect when #Videop is clicked and show a loading GIF image

$("#Videop").click(function ()
 {     //till the time the post function below doesn't return the following image will be displayed
     tactile.page.getComponent("loadingnext").show();
     window.location.href('http://cloud.netbiscuits.net/1305494/SyngentaMobileStage/aspx/Video.aspx');
 });

The above code will show the GIF image, until your page is redirected. Now you will not have the head ache of bringing all the css and script files from that page to here.

EDIT:

in your new page Video.aspx add this, hope this will solve your problem

$(document).ready(function(){
    //Display your GIF Image
    //tactile.page.getComponent("loadingnext").show(); 
    console.log("I'm loading");
});

jQuery(window).load(function () {
    //Hide your GIF image
   // tactile.page.getComponent("loadingnext").hide(); 
    console.log('page is loaded');
});

Answer 2

I think what you need is a progress function, and show a waiting image before ajax starts, and hide after ajax ends.

1. Add a element hidden in the body tag, that could be a image or a loading div.
2. Define a function.
3. Call it before and after ajax.

Here is a small demo, hopes to help you out.

#loading{display:none;position:absolute;left:50%;top:50%;width:100px;border:1px solid #ccc;}
<div id="loading">loading...</div>
$.progress = function(stop){
    if(stop){
        $('#loading').hide();
    } else {
        $('#loading').show();
    }
};

$.ajaxSetup({
    beforeSend: function(){
        $.progress();
    }, complete: function(){
        $.progress(true);
    }
});

You can change the style by yourself.

jsfiddler was down, I can not write code, sorry about that. :D