3

I am working with a div that has any number of img elements inside it. Right now, each img has the following CSS:

#content > img {
display: none;
position: absolute;
top: 0px;
left: 0px;
}

And the images can be cycled-through with a function that shows and hides them in turn. While each image is loading, however, I'd like to display a "loading..." image. I'd like to use JavaScript/jQuery to swap the source of each incomplete image for the "loading..." image while still permitting it to load. What's a lean and mean way to do this?

Isaac Lubow
  • 3,557
  • 5
  • 37
  • 53

2 Answers2

5
$(function(){
   $('<img>').attr('src','loading.gif'); // preload the "loading" image.

   $('#content > img').each(function(){
       var original = this.src;
       var $this = $(this);
       $this.attr('src','loading.gif'); // swap to loading image.
       $('<img>').attr('src',original)// pre-load original.
              .load(function(){
                 $this.attr('src',original); // swap it back when pre-load is done. 
              });
   })
});

crazy example

Reigel Gallarde
  • 64,198
  • 21
  • 121
  • 139
  • Now _there's_ an idea. What is the purpose of the `<` and `>` in the `$('')` selector? Does this do something other than select the `img` elements? – Isaac Lubow Sep 23 '10 at 03:55
1

There's an imagesLoaded plugin that can be found here: http://gist.github.com/268257

Just show the loading image, bind to the imagesLoaded event and when it's triggered, hide the loading image.

UPDATE:

Actually, jQuery has built in methods to detect loading now: http://api.jquery.com/load-event/

Matt Williamson
  • 39,165
  • 10
  • 64
  • 72
  • Yes, I know this plugin. I guess I could execute a function every time one of the images is shown. If it's not complete, then the "loading" image gets shown (in front of the `div`). Otherwise, it isn't shown. I was thinking of switching the source of each image, but I guess there's no need. – Isaac Lubow Sep 23 '10 at 03:41
  • Don't forget we have the `hide` and `show` methods. I don't think the src way would work because you'd need to have it set to the large image in order to start the download. – Matt Williamson Sep 23 '10 at 03:55
  • @Matt - I don't quite get this - `you'd need to have it set to the large image in order to start the download` – Reigel Gallarde Sep 23 '10 at 04:02
  • Let's say you have an image "/test.jpg" that you want to show. The browser won't start downloading it until you set the src of an img tag to "/test.jpg". So, if you wanted to do the swapping via the src attribute, you'd need to set the src attribute to some *other* img tag first, so you may as well just do it once. – Matt Williamson Sep 23 '10 at 04:12
  • hehe I'll introduce you to `$('')`. and let's put `/test.jpg` as a source of it. `$('').attr('src','/test.jpg')`. this is like ``. The only difference is that `$('')` is not attached to `DOM`. cool ;) – Reigel Gallarde Sep 23 '10 at 04:20
  • Is there any documentation relating to this? What a groovy trick. – Isaac Lubow Sep 29 '10 at 03:42