如何预加载图像以便稍后使用 jQuery 将其设置为背景图像？

Question

我正在尝试预加载图像，因此当我需要将其设置为背景图像时，它已准备就绪，并且不会在 CSS 转换期间加载。我尝试使用 AJAX load() 方法来做到这一点，但我认为我应该能够在没有 AJAX 的情况下做到这一点。我不确定这样的事情是否会起作用，因为我不需要 img 标签或 src，但是像存储背景图像的直接 URL 这样我以后可以将其设置为背景图像。

var img = new Image(); img.src = 'img.jpg';

这是我到目前为止所做的：

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

Answer 1

创建图像对象后使用

var myImage = new Image();

分配该图像的 src，它将将该图像加载到浏览器缓存中，如下所示：

myImage.src = 'my-bknd.jpg';

现在它在浏览器缓存中，您可以随时选择将其添加到 DOM：

document.getElementById('myDiv').style.background = 'url(my-bknd.jpg)';