Show Loading

[Dave Maharaj]

Is there a way that when your loading content to display the loading div for
a minimum amount of time?
 
I am requesting Ajax grab some content for me and while its doing so I show
the loading spinner but in some cases it just flashes for a millisecond and
gone. Can it be set to show for a minimum length of time?
 
$("a.add").click(function (){
           
 var url_id = $(this).attr("href");
 var div_id = url_id.substr(1).replace( new RegExp( "/" ,"g"), "_" );

 $('#' + div_id).after('<div class="loading"></div>');
  $('.loading').fadeIn('normal');
  $.ajax({
     type: "GET",
     url: url_id,
     cache: true,
     success: function(response){
      $('.loading').fadeOut('normal').remove();
      $('#' + div_id).html(response).slideToggle('slow');
      }
   });
 return false;
 });

Thanks
 
Dave

[Nathan Bubna]

I was working on adding this feature to the loading plugin a few weeks
ago.  I finished it today:

http://jquery-values.googlecode.com/svn/other/loading/jquery.loading.js

On Tue, Nov 10, 2009 at 11:17 AM, Dave Maharaj :: WidePixels.com
<dave@...> wrote:

> Is there a way that when your loading content to display the loading div for
> a minimum amount of time?
>
> I am requesting Ajax grab some content for me and while its doing so I show
> the loading spinner but in some cases it just flashes for a millisecond and
> gone. Can it be set to show for a minimum length of time?
>
> $("a.add").click(function (){
>
>  var url_id = $(this).attr("href");
>  var div_id = url_id.substr(1).replace( new RegExp( "/" ,"g"), "_" );
>
>  $('#' + div_id).after('<div class="loading"></div>');
>  $('.loading').fadeIn('normal');
>  $.ajax({
>     type: "GET",
>     url: url_id,
>     cache: true,
>     success: function(response){
>      $('.loading').fadeOut('normal').remove();
>      $('#' + div_id).html(response).slideToggle('slow');
>      }
>   });
>  return false;
>  });
>
> Thanks
>
> Dave
>
>

[Matthew-97]

Nathan's plugin looks like the way to go, but before I saw his plugin
I would always just show some loading div or paragraph before the ajax
call, then hide it in your 'success:' function in the ajax call.

$('#loader").fadeIn(500);

do your ajax thing

success: function(){

    $('#loader").fadeOut(500);

}


You can also use setTimeOut to extend the time the fadeIn is showing.

However, do give respect to Nathan's work, use his plugin, I plan on
using it from here on out whenever I need to either simulate loading
or am actually loading something via ajax.

On Nov 10, 4:02 pm, Nathan Bubna <nbu...@...> wrote:

> I was working on adding this feature to the loading plugin a few weeks
> ago.  I finished it today:
>
> http://jquery-values.googlecode.com/svn/other/loading/jquery.loading.js
>
> On Tue, Nov 10, 2009 at 11:17 AM, Dave Maharaj :: WidePixels.com
>
> <d...@...> wrote:
> > Is there a way that when your loading content to display the loading div for
> > a minimum amount of time?
>
> > I am requesting Ajax grab some content for me and while its doing so I show
> > the loading spinner but in some cases it just flashes for a millisecond and
> > gone. Can it be set to show for a minimum length of time?
>
> > $("a.add").click(function (){
>
> >  var url_id = $(this).attr("href");
> >  var div_id = url_id.substr(1).replace( new RegExp( "/" ,"g"), "_" );
>
> >  $('#' + div_id).after('<div class="loading"></div>');
> >  $('.loading').fadeIn('normal');
> >  $.ajax({
> >     type: "GET",
> >     url: url_id,
> >     cache: true,
> >     success: function(response){
> >      $('.loading').fadeOut('normal').remove();
> >      $('#' + div_id).html(response).slideToggle('slow');
> >      }
> >   });
> >  return false;
> >  });
>
> > Thanks
>
> > Dave
>
>