logo标签列表

使用jQuery预加载CSS悬停图片

jqueryhtmlcss
4
有人知道使用jQuery预加载css悬停图片的好方法吗？
我想要的理想情况是能够为任何应该被预加载的元素添加一个类（比如说“pre-load-hover”），然后在$(document).ready()中放置一些js来循环遍历具有该类的任何DOM元素，找到它们的CSS背景图像并将其加载。
问题在于我无法轻松地获取悬停图像位置。jQuery选择器:hover似乎无法起作用。
我也不想加载所有样式表并通过某种字符串搜���查找选择器。
2
你应该使用精灵图表。 :) http://css-tricks.com/css-sprites/ - Thomas Clayson
6个回答
7

我认为你应该尝试使用CSS精灵技术。这是一种技术，你可以使用一个图像同时包含常规图像和悬停图像。然后你只需要通过调整外边距（使用负边距）来显示适当的图像。你可以阅读关于CSS精灵的文章。

http://spritegen.website-performance.org/ 是一个非常有用的工具，可以生成精灵图。 - Adam Heath
-1 - 这并没有回答问题。CSS精灵有它们的使用情景，但并不总是适合当前的工作。 - sergserg
@Serg 这个回答其实是提供了一个另外的解决方案，仍然是一个答案。我认为这比使用图像预加载特别是对于悬停图像来说要好得多。 - Pavel Nikolov
3

这是我用来预加载图片的小段代码：

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

已经有一些插件可以实现这个功能了，可以去看看。至于另一部分，:hover不是一个有效的选择器，不能用于查询其他元素（基本上，总是避免在选择器中使用它，因为它在跨浏览器方面无法工作）。

附注：当在a元素上使用时，:hover可以正常工作。至少在所有主要的浏览器中（基于Trident、Presto、WebKit和Gecko）。关于您的链接的编辑：他们真的在使用JavaScript解析CSS吗？我认为这不是一个好主意... - jwueller
@elusive - 用于应用CSS，不是在jQuery选择器中...你将选择哪些元素？ - Nick Craver
0
你可以将你的精灵图像进一步制作成一个图像表，然后通过坐标请求图像。像Google和Yahoo这样的大公司正在这样做，以降低服务器请求量（因为他们只使用一个图像请求来显示多个图像）。

Google精灵图像表示例

在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）可能会出现背景图像被正确裁剪的问题。

这与普通的CSS雪碧图有何不同？ - jwueller
它们完全相同。但我看到有人为他们想要悬停状态的每个图像制作单独的图像。这是不必要的。 - Damien
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接