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

Improve this question
1
  • 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 Commented Oct 31, 2013 at 22:33

3 Answers 3

Reset to default
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>
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

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?
Basically yes. Could you please explain what you are exactly trying to do?
Thanks for getting back to me. As you see above I have an html table. In one <td> 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.
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.
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?
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(); }
Improve this answer

Comments

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"); }); })
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.