CODEWITHSUNDEEP
jquery
michael
michael

Reputation: 1202

jquery loading image while elements loads

I'm looking for any tutorials/articles about inserting a loading GIF while elements load, I've seen it in a few sites. I can only seem to find articles on preloading images.

Upvotes: 3

Views: 13673

Answers (5)

John Max
John Max

Reputation: 432

There is a simplest way of doing this without using Show or hide. Because to use show or hide implies that you have to create a div somewhere inside which you would have placed your loading image which actually is not necessary. This is the way

 <a href="mypage.php" rel="charger">Load Page 1</a>

<div id="LoadMe">LoadMe div</div>

<script>


    $('a[rel*=charger]').click(function() {

    $('#LoadMe').html('<img src="images/facebook_style_loader.gif" />');

  $('#LoadMe').load($(this).attr('href'));



  return false;
});




</script>

Once you have done this, you will NOT need to add any other additional div and use css to hide it because you will be using show or hide. And also this will make the loading image appear exactly where the things are supposed to load but the show and hide may not always allow the loading image to appear at the right place if you have a lot of stuff on the page that you want to load. Hope that helped.

Upvotes: 0

Mat Ryer
Mat Ryer

Reputation: 4047

You can generate the loader GIFs here: http://www.ajaxload.info/

Upvotes: 2

elmuerte
elmuerte

Reputation: 720

It's usually nothing more than:

function onAGivenEvent() {
    $('someContain').append('<div id="throbber"></div>');
    // do some slowthings with a "on complete callback to onComplete
}

function onComplete() {
    $('#throbber').remove();
}

But there are also cases where you don't even need Javascript. For example in case of large images. In that case you can do it using HTML and CSS:

img.largeImage {
   background: url(throbber.gif) center no-repeat;
}

and in HTML

<img class="largeImage" src="..." />

Upvotes: 2

tvanfosson
tvanfosson

Reputation: 532435

Depending on what you are trying to do, it's not particularly hard. The following will show a loading image (pre-existing), then load some html retrieved via ajax, then upon completion, it will hide the loading image.

$(function() {
   $('#activate').click( function() {
      $('#loadingImg').show();
      $('#whereItGoes').load( 'url-to-data-to-be-loaded', function() {
          $('#loadingImg').hide();
      });
   });
});

If the data to be loaded are images, then it gets a little tricker since the load callback may be called before the image data is actually downloaded. One strategy in that case is to have a script included with the HTML that knows how many images are to be loaded and have an onloaded event handler that basically ticks off the image count until all the images have been downloaded. I usually couple it with a timeout in case the onloaded handler doesn't get added before the image data is available (in which case it won't fire).

Upvotes: 6

jonstjohn
jonstjohn

Reputation: 60266

A general strategy is to place the loading image in a div or span tag, and show or hide it when you want to show it. If you want to show it initially, just place a jQuery .hide() function on the div or span in the jQuery on ready function.

See the jQuery docs on show() and hide()

Upvotes: 2

Related Questions