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

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()