jquery - 如何加载大尺寸图像以便以后使用它作为 jQuery 的背景图像悬停效果？

Question

我正在尝试使用 jQuery 和 CSS 过渡来淡化两个背景图像并且它有效，但是图像是高分辨率并且相当大，即使我尽可能地压缩它们以供网络使用但保持分辨率和细节。它在网速适中时效果不佳，因为我第一次将鼠标悬停在触发元素上时出现白屏错误，我真的不喜欢。

我知道我可以通过添加一个隐藏的 div 来做到这一点，该 div 的背景图像 url 将被设置为 display: none;并触发不透明度变化，但我想知道是否有更好的方法来做到这一点。例如在悬停功能发生之前加载图像，所以当文档准备好时。也许它仍然会发生，但可能性要小得多。

当我将鼠标悬停在触发元素上时，CSS 过渡效果很好，但是当鼠标移开时，图像会消失而不会褪色，我不确定我是应该使用 jQuery 还是直接使用 CSS 来解决这个问题。无论如何，问题是在悬停功能启动之前加载图像。我将尝试 AJAX load() 方法...

#Introduction {
    background: url(url.jpg) no-repeat fixed center;
    background-size: cover;
    transition: background 1.5s linear;
}

$(document).ready(function() {
$('#LogoContainer').hover(function() {
    $('#LogoMainPiece').fadeTo('slow', 0.3);
    $('#LogoOtherPiece').fadeTo('slow', 1);
    $('#Introduction').css('background-image', 'url(hoverurl.jpg)');
}, function() { 
    $('#LogoMainPiece').fadeTo('slow', 1);
    $('#LogoOtherPiece').fadeTo('slow', 0.3);
    $('#Introduction').css('background-image', 'url(url.jpg)');
});
});

Answer 1

#Introduction {
    background: url(bg.jpg) no-repeat fixed center;
    background-size: cover;
}
#IntroductionHoverBackground {
    width: 100%;
    min-height: 730px;
    background: url(hoverbg.jpg) no-repeat fixed center;
    background-size: cover;
    display: none;
}

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    $('#LogoContainer').hover(function() {
        $('#LogoMainPart').fadeTo('slow', 0.37);
        $('#LogoOtherPart').fadeTo('slow', 1);
        $('#IntroductionHoverBackground').fadeTo('slow', 1);
    }, function() { 
        $('#LogoMainPart').fadeTo('slow', 1);
        $('#LogoOtherPart').fadeTo('slow', 0.37);
        $('#IntroductionHoverBackground').fadeTo('slow', 0);
    });
});
//]]>
</script>