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

Question

我有一个像这样的可点击的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)');
        });
    });

这是行不通的，点击图片永远不会加载。但是，如果我像这样向它添加 return 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，这实际上没什么。