CODEWITHSUNDEEP
jqueryjquery-animateanimated-gif
ApPeL
ApPeL

Reputation: 4921

jQuery show loading div for each thumbnail until loaded

I have a page with 50 thumbnails that load once a user enters the site.

I am looking at creating a loading... div or possibly make use of an animated gif to display that the thumbnail image is still loading, and then switch to the image once loaded.

What is the best option to use, pure JS or jQuery and how would one approach something like this?

Thanks in advance

Upvotes: 1

Views: 2253

Answers (4)

Ionuț Staicu
Ionuț Staicu

Reputation: 22194

You can use $(window).ready() instead of $(document).ready(). If document fires when DOM is ready, window will fire when all elements are ready. The only thing is that if you have any external files and the server is not available, your script will not fire.

Upvotes: 1

dylanfm
dylanfm

Reputation: 6345

You can bind to an image's load event.

var img = new Image(640, 480); 
img.src = '...';
$(img).bind('load', function() { 
  // Has loaded
});

Maybe each image is within an li. You could load the page with the li's having a class of loading. Style that with CSS so that it looks how you want the loading bit to be. Bind to the load events of the images and in the callback remove the loading class from the parent li.

Upvotes: 1

Reigel Gallarde
Reigel Gallarde

Reputation: 65274

are the thumbnails got fixed width and height?

well, heres an idea on how to do it...

var loading = $('<img src="loading.gif" alt="loading" />');
$('#thumbnail').each(function(){
   var loadIMG = loading.clone();
   $(this).after(loadIMG).load(function(){
      $(this).show();
      loadIMG.hide();
   }).hide();
});

resources

Upvotes: 2

pritaeas
pritaeas

Reputation: 2093

You could use pure javascript, to avoid the overhead of the jQuery library. But if you're already using it on your site, then why not use it.

Upvotes: 1

Related Questions