使用jQuery预加载css悬停图像

Question

有谁知道用jQuery预加载css hover图片的好方法吗？

理想情况下，我希望能够向任何应该预先加载的元素添加一个类(比如"pre-load-hover")，然后在$(document).ready()中放入一些js，以便使用该类遍历任何DOM元素，找到它们的css背景图像并加载它。

问题是我不能想出一种方法来轻松地到达悬停图像位置。jQuery选择器:hover似乎不起作用。

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

Answer 1

我认为你应该尝试使用CSS精灵。这是一种使用同时包含正常图像和悬停图像的图像的技术。然后，您只需使用边距(使用负边距)来显示适当的图像。你可以阅读这篇关于CSS sprites的文章。

Answer 2

这是我用来预加载图片的一个小片段：

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();
        }
    }
}());

用法：

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

Answer 3

你可以看看这里：

这是jquery的一个特殊插件。

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