Question

我有一个可点击的div，如

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

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

我这样做

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

这不起作用，并且点击图像从不劳累。但是，如果我像这样添加一个返回false

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

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

Answer 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，这实际上并不是真的。

Answer 2

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

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

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

jquery链接在下一页加载之前单击切换图像

2 个答案: