4

Does anybody know a good way to preload css hover images using jQuery?

What I'd ideally like is to be able to add a class (say "pre-load-hover") to any element that should be pre-loaded, and then put some js in $(document).ready() to loop through any DOM elements with that class, find their css background-image and load it up.

The problem is I can't work out a way to easily get to the hover image location. The jQuery selector :hover does not seem to work.

I also don't want to load all the stylesheets and search for the selector by some sort of string search.

Improve this question
1

6 Answers 6

Reset to default
7

I think you should try with CSS sprites. This is a technique where you use one image which contains both the normal image and the hover image. Then you just play with the margin (using negative margin) to show the appropriate image. You can read this article about CSS sprites.

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

3 Comments

spritegen.website-performance.org Is a pretty useful tool to generate sprites.
-1 - This doesn't answer the question. CSS sprites have their use cases, but are not always the right tool for the job.
@Serg it actually answers the question by giving an alternative solution which is still an answer. I would say that this is much better than using image preloading especially for hover images.
3

This is a small snipped i am using to preload images:

preload = (function () {
    var images = [];

    return function () {
        var args = Array.prototype.slice.call(arguments);

        while (args.length > 0) {
            images.unshift(new Image());
            images[0].src = args.shift();
        }
    }
}());

Usage:

preload('http://example.com/some_image.png' /* , 'http://example.com/some_other_image.png' ... */);
preload.apply(this, ['http://example.com/some_image.png' /* , 'http://example.com/some_other_image.png' ... */]);
Improve this answer

Comments

1

You might take a look over here:

This is a special plugin for jquery.

http://plugins.jquery.com/project/automated_image_preloader

Improve this answer

Comments

1

There are a few plugins out there for this already, check them out. For the other portion, :hover isn't a valid selector, not when querying other elements (pretty much, always avoid using it in a selector, since it doesn't work cross-browser).

Improve this answer

2 Comments

+1 for the correct answer. Sidenote: :hover works fine when used on a elements. At least in all major browsers out there (based on Trident, Presto, WebKit and Gecko). Edit regarding your link: Are they really parsing CSS using JavaScript? I do not think that this is a good idea...
@elusive - for applying CSS yes, not in a jQuery selector...what elements would you be selecting?
0

You could take your sprites one step further and make a sheet of them and request the images by coordinates. Bigger companies like Google and Yahoo are doing this to lower server requests (because they're only using one image request to show multiple images).

Google sprite sheet example

Call specific images with coordinates in CSS:

.image1
{
    background: url(spritesheet.png) -30px -30px no-repeat;
    height: 30px;
    width: 30px;
}


.image2
{
    background: url(spritesheet.png) -120px -50px no-repeat;
    height: 30px;
    width: 30px;
}

Put some spacing in between the icons though, because some mobile browsers (like Safari on the iPad) have trouble with cutting the background image off correctly.

Improve this answer

2 Comments

How is this different from normal CSS-sprites?
It's the exact same. But I see people making separate images for each image they want a hover state for. Which isn't needed.
0

http://binarykitten.me.uk/dev/jq-plugins/11-jquery-image-preloader.html usage: $.preLoadImages(['/images/1.png', '/images/2.png', '/images/3.png']);

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.