使用jQuery预加载css悬浮图像

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

有人知道用jQuery预加载css鼠标图像的好方法吗?

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.

理想情况下，我希望能够将类(比如“预加载-悬浮”)添加到应该预加载的任何元素中，然后将一些js放入$(document).ready()中，以循环使用该类的任何DOM元素，找到它们的css背景图像并将其加载。

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.

问题是我无法找到一种方法来轻松地到达悬停图像的位置。jQuery选择器:hover效果不太好。

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

我也不想通过某种字符串搜索加载所有样式表并搜索选择器。

6 个解决方案

#1

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.

我觉得你应该试试CSS精灵。这是一种技术，您使用一个包含普通图像和悬停图像的图像。然后你只需要使用边距(使用负边距)来显示适当的图像。您可以阅读这篇关于CSS精灵的文章。

#2

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' ... */]);

#3

You might take a look over here:

你可以看看这里

This is a special plugin for jquery.

这是一个针对jquery的特殊插件。

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

#4

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

现在已经有了一些插件，请查看它们。对于另一部分，:hover不是一个有效的选择器，不是在查询其他元素时(非常多，总是避免在选择器中使用它，因为它不使用跨浏览器)。

#5

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:

在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.

在图标之间放一些间隔，因为一些移动浏览器(比如iPad上的Safari)会有问题，不能正确地删除背景图像。

#6

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

http://binarykitten.me.uk/dev/jq-plugins/11-jquery-image-preloader。html使用:$ .preLoadImages([' /图片/ 1。png”、“/图片/ 2。png”、“/ / 3. png图像'));

#1

#2