Question

I am using, Ajax load function in jquery to load another page in DOM.
By using this

$('.upload').on('click',function(){

 $('.content').load('loo.php');

});

When i use this the page in division content loads after a 3-4 second Interval.

I wanted to show progress bar using that interval so i used this way

$('.upload').on('click',function(){

       $.ajax({
           url: 'loo.php',
         beforeSend:function(){

           res.container.append(res.loader); //Showing loader

         },
         success:function(){

            $('.content').load('loo.php');
             res.container.find(res.loader).remove(); //Hiding Loader 

               }

       });

});

So Now what happen is, loader comes and shows for few time and then page in division loads, But the problem is i again see delay in page loading after the loader hides. I created the loader to overcome the time but, still it takes time after the loader goes.

In firebug, by analysing request the page starts loading after the loader , which i don’t want.
Any idea, how to overcome this problem.

Answer 1

you are removing the “loader” before the AJAX request is finished. you should remove the loader in a callback function, after the load() is finished. Also no need for double AJAX request.

$('.upload').on('click',function(){
   res.container.append(res.loader); //Showing loader
  $('.content').load('loo.php', function(){
             res.container.find(res.loader).remove(); //Hiding Loader 

    });
});