Question

我现在不使用css sprites。

我知道这是最佳解决方案，但我无法及时赶时间。

我需要一种方法来预加载悬停和活动选择器的所有图像。

我找到了一个jQuery解决方案here

但是我想知道我是否有办法动态地让jQuery读取我的css文件中的所有活动和悬停选择器？

我的css文件路径是/theme/V1/css/content.css

E.g。我的css文件是：

.button_48x49_img {
    width: 48px;
    height: 49px;
}

.button_join_login_48x49_img {
    background-image: url('a.png');
}

.button_join_login_48x49_img:hover {
    background-image: url('b.png');
}

.button_join_login_48x49_img:active {
    background-image: url('c.png');
}

有没有办法以某种方式预加载b.png和c.png而我没有明确告诉预加载的javascript代码？

Answer 1

这将是棘手的，因为你将不得不瞄准悬停和活跃的选择器 - 这超出了我...

但是 - 如果您只是在寻找快速解决方案，可以通过调用要加载到隐藏div中的图像来预加载图像：

    <div class="preload-images">
        <img src="b.png" />
        <img src="c.png" />
    </div>

和css：

    .preload-images{display:none;}

轻松自负。

Answer 2

要动态获取:hover和:active类属性，可以使用以下代码。通过这种方式，您将获得可用于预加载的b.png和c.png路径。

小提琴：http://jsfiddle.net/FjTn5/

<强> HTML

<div class="button_48x49_img button_join_login_48x49_img"></div>

<强>的Javascript

function getCssProperty(rule, prop) {
    var sheets = document.styleSheets;
    var slen = sheets.length;
    for(var i=0; i<slen; i++) {
        var rules = document.styleSheets[i].cssRules;
        var rlen = rules.length;
        for(var j=0; j<rlen; j++) {
            if(rules[j].selectorText == rule) {
                return rules[j].style[prop];
            }
        }
    }
}


console.log(getCssProperty('.button_join_login_48x49_img:hover', 'background-image'));
console.log(getCssProperty('.button_join_login_48x49_img:active', 'background-image'));

<强> CSS

.button_48x49_img {
    width: 48px;
    height: 49px;
}

.button_join_login_48x49_img {
    background-image: url('a.png');
}

.button_join_login_48x49_img:hover {
    background-image: url('b.png');
}

.button_join_login_48x49_img:active {
    background-image: url('c.png');
}

Answer 3

http://filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/

显示了jquery预加载css文件中所述图像的方法。

但是，这不会区分悬停选择器或活动选择器。

在我的webapp上试用了这个解决方案后，我注意到加载图像需要额外的时间。

在这个问题的基础上，使用这种方法是正确的答案。为了编写一个运行良好的webapp，这种方法并不理想。

给定css文件路径，在css文件中为悬停活动选择器预加载图像

3 个答案: