如何预加载图像以便稍后将其设置为 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)';

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

How can I preload an image to later set it as a background-image with jQuery?

css

jquery

image

hover

preloading