Preloading Image, (source in javascript)

Question

Ok I previously asked how to do a javascript image hover effect, however the effect doesn't allow the images to be previously preloaded. I was wondering if anyone could help me improve/make new script that will preload the images requested. Here is the code:

$('#nav li a img').each(function() {
   var originalSrc = this.src,
       hoverSrc = originalSrc.replace(/\.(gif|png|jpe?g)$/, '_hover.$1'); 

   $(this).hover(function() {
      this.src = hoverSrc;
   }, function() {
      this.src = originalSrc;
   });
});

There is a code display that does syntax highlighting and preserves formatting. The button is in the editor and looks like {}. You can also indent the code by 4 spaces. — alex
– alex, Commented Apr 27, 2011 at 0:16
@alex Tried that earlier didn't seem to work when i copy pasted my code. — Jason
– Jason, Commented Apr 27, 2011 at 6:21

alex · Accepted Answer · 2011-04-27 00:18:08Z

3

You could use a generic one...

(function() {
    var imgs = ['a.jpg', 'b.jpg'],
        imgsLength = imgs.legnth,
        index = 0,
        loadNextImage = function() {

            var image = new Image();

            image.onload = function() {
                if (index == imgsLength) {
                   return;   
                }
                index++;
                loadNextImage();
            }

            image.src = imgs[index];
        }
}();

jsFiddle.

...or for your specific example...

$('#nav li a img').each(function() {
   var originalSrc = this.src,
       hoverSrc = originalSrc.replace(/\.(gif|png|jpe?g)$/, '_hover.$1'); 
       image = new Image();

   image.src = hoverSrc;

   $(this).hover(function() {
      this.src = hoverSrc;
   }, function() {
      this.src = originalSrc;
   });
});

This will load them all when the JavaScript is ran. There is no handler on their load event, so you may wish to add one and not display the hover effect until they have in fact been downloaded.

edited Apr 27, 2011 at 0:18

answered Apr 27, 2011 at 0:13

alex

492k205 gold badges890 silver badges992 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Jason Over a year ago

@alex Will check it isn't my fault but this doesn't seem to work.

Jason Over a year ago

@alex Just realised i hadn't put it in a function() {} I need that right?

alex Over a year ago

@Jason Well, which one are you using? The first or second example?

Jason Over a year ago

@alex Second but refer to my previous comment.

Jason Over a year ago

@alex Oh and your reference to the load event. They are only kilobytes big, they should download much much faster then other parts of the page so i don't think it will be a problem. If i did want to add a load even how would I, or should i ask another question?

|

Dave Robertson · Accepted Answer · 2011-04-27 00:40:58Z

1

Create div and put your rollover/hover images in it then hide the div

<div style="display:none">
    <img src="" />
    <img src="" />
    etc..
</div

This will load the images without having to use javascript at all, but there is a known problem with Opera using this method.. But I use it all the time works fine.

answered Apr 27, 2011 at 0:40

Dave Robertson

3834 silver badges13 bronze badges

Collectives™ on Stack Overflow

Preloading Image, (source in javascript)

2 Answers 2

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related