0

我有一个可点击的 div

<a href="/go/to/link">
<div class="background-image"></div>
</a>

我想在重定向用户之前切换该 div onclick 的背景图像。

我正在这样做

$(document).ready(function(){
        $(".background-image").click(function() {
            $(this).css('background-image', 'url(/newimage)');
        });
    });

这不起作用并且onclick图像永远不会laods。但是，如果我像这样向它添加 return false

$(".background-image").click(function() {
            $(this).css('background-image', 'url(/newimage)');
                    return false;
        });

然后图像显示，但现在页面不重定向到链接。我能在这里做什么。谢谢

4

2 回答 2

1

编辑：我实际上在没有缓存图像的情况下尝试了我的原始解决方案，它对我不起作用，我认为以下应该有效：

http://jsfiddle.net/ma2zY/4/

$(document).ready(function () {
    $(".background-image").click(function (e) {
        var that = this;
        e.preventDefault();
        $('<img/>').attr('src', 'http://www.gq.com/images/style/2012/04/simpsons-style/simpsons-96.jpg').load(function () {
            $(that).css('background-image', 'url(http://www.gq.com/images/style/2012/04/simpsons-style/simpsons-96.jpg)').delay(1).queue(function () {
                window.location = $(that).closest('a').prop('href');
            });
        });
    });
});

这会加载图像并等待图像被加载，然后再将其换出并继续。我还添加了一个delay()，如果你愿意，你可以用它让它等待更长时间，它目前设置为 1，这实际上没什么。

于 2013-06-25T01:13:23.510 回答
0

我认为这是我这样做时加载图像

<a href="/go/to/link">
<img src="/somenewimage" style="display:none">
<div class="background-image"></div>
</a>

它的工作原理是在单击激活之前将图像加载到内存中。不确定这是否是最好的方法，但这是我让它工作的唯一方法

于 2013-06-25T01:22:34.550 回答