Question

有人知道使用jQuery预加载css悬停图片的好方法吗？

我理想的是能够为任何应该预加载的元素添加一个类（比如“pre-load-hover”），然后在$(document).ready()中放入一些j来循环通过该类的任何DOM元素，找到他们的css背景图像并加载它。

问题是我无法找到一种轻松进入悬停图像位置的方法。 jQuery选择器:hover似乎不起作用。

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

Answer 1

我认为你应该尝试使用CSS sprites。这是一种使用包含普通图像和悬停图像的图像的技术。然后你只需使用边距（使用负边距）来显示合适的图像。您可以阅读有关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

Answer 4

有一个few plugins out there for this already，请查看它们。对于其他部分，:hover不是有效的选择器，而不是在查询其他元素时（非常，总是避免在选择器中使用它，因为它不能跨浏览器工作。）

Answer 5

你可以将你的精灵更进一步，制作一张它们并按坐标请求图像。像谷歌和雅虎这样的大公司正在这样做以降低服务器请求（因为他们只使用一个图像请求来显示多个图像）。

Google sprite sheet example

使用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;
}

在图标之间放置一些间距，因为某些移动浏览器（如iPad上的Safari）在正确剪切背景图像方面存在问题。

Answer 6

http://binarykitten.me.uk/dev/jq-plugins/11-jquery-image-preloader.html 用法：$ .preLoadImages（['/ images / 1.png'，'/ images / 2.png'，'/ images / 3.png']）;

使用jQuery预加载css悬停图像

6 个答案: