jQuery show loading div for each thumbnail until loaded

Question

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

Answer 1

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.

Answer 2

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

• load-event
• .after()

Answer 3

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.

Answer 4

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.