2

I previously asked a question on how to hover on a small image and load an additional image to the right side of the page. I have everything working correctly, but now I want to preload images.

How can I preload an image using JQuery so that I can show it immediately to the user when I want to (without a loading time)?

sjkm
  • 3,887
  • 2
  • 25
  • 43
Matt
  • 35
  • 1
  • 1
  • 7
  • This is pretty much a duplicate question. No need for jQuery to preload images. A simple search here will find you dozens of posts on this topic. Here's one that will even call you back when they're all loaded: [Image preloader javascript that supports events](http://stackoverflow.com/questions/8264528/image-preloader-javascript-that-supports-events) – jfriend00 Oct 31 '13 at 22:33

3 Answers3

11

You can preload an image quite easily as follows:

using JQuery

function preloadImg(src) {
    $('<img/>')[0].src = src;
}

preloadImg('http://yoururl/to/the/picture.jpg');

or Native Javascript

function preloadImg(src) {
    var img = new Image();
    img.src = src;
}

preloadImg('http://yoururl/to/the/picture.jpg');

or Using CSS (no JavaScript required)

You can also preload images using CSS (and HTML)

CSS: div#preload { display: none; }

HTML: 

<div id="preload">
   <img src="http://yoururl/to/the/picture1.jpg" width="1" height="1" alt="Image 1" />
   <img src="http://yoururl/to/the/picture2.jpg" width="1" height="1" alt="Image 2" />
   <img src="http://yoururl/to/the/picture3.jpg" width="1" height="1" alt="Image 3" />
</div>
sjkm
  • 3,887
  • 2
  • 25
  • 43
  • So, I would replace preloadImg('yoururl/to/the/picture.jpg'); with the url for every image that I an using? How would that change how I call .hover? – Matt Oct 31 '13 at 23:25
  • Basically yes. Could you please explain what you are exactly trying to do? – sjkm Nov 01 '13 at 08:03
  • Thanks for getting back to me. As you see above I have an html table. In one i have a small img of a player. The remaining cells have info on that player. On img hover a different larger img of the player appears to the right. I have that part figured out. So the next thing I am trying to teach myself is how to preload those imgs. I have seen several ways of preloading imgs, but get a bit lost with the way I have 2 different imgs for each player, one not being displayed until hover (46 img total), and calling them on hover. I hope this helps clear up what I'm trying to figure out. – Matt Nov 01 '13 at 12:41
  • you can preload all larger images by iterating over them and calling preloadImg for each. Then the browser caches those images. When a user hovers the small image then you just have to create an image-tag (src=large image url) and append it to the cell. Alternatively you could insert all the images in the corresponding cell and hide them using css (or js). then on hover you just have to change the visibility. That's the way I would do it. – sjkm Nov 01 '13 at 13:09
  • As far as I can tell, this is working everywhere EXCEPT Safari (Version 7.0.1 (9537.73.11), Mac OS X 10.9.1). Any ideas? Can anyone confirm? – Sam Jan 19 '14 at 02:23
1

The easiest way to preload an image would be something like this:

function preload(selector, url) {
    $('<img/>').attr({
        src: url,
        height: '1px',
        width: '1px'
    }).appendTo($(selector)).delay(1000).remove();
}
Mike Thomsen
  • 36,828
  • 10
  • 60
  • 83
0

I did it like this.

I looked up any hover state images then preloaded the hover state by replacing the -nm (normal) with the -hv (hover)

The beauty of doing it like this is that there is no hard coding of URLs

$(function() {
        $(this).find("img[src*='-nm']").each(function () {
           $('<img/>')[0].src = this.src.replace(/-nm/, "-hv");
        });
})
RodgeDodge
  • 1