我有一个像这样的可点击的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;
});
然后图像显示,但现在页面没有重定向到链接。我能在这里做什么。 谢谢
最佳答案
编辑:我实际上在没有缓存图像的情况下尝试了我的原始解决方案,但它对我不起作用,我认为以下应该可行:
$(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,这实际上没什么。
关于javascript - jquery 链接在下一页加载之前单击切换图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17287525/