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

我试图预加载图像，所以当我需要将其设置为背景图像时，它已准备就绪，并且在CSS过渡期间不会加载。我试图用AJAX load（）方法来做，但我认为我应该可以在没有AJAX的情况下做到这一点。我不确定像这样的东西会起作用，因为我不需要一个img标签或src，但是像存储背景图像的直接URL这样的东西，所以我可以稍后将其设置为背景图像。如何预先加载图像以便稍后将其设置为jQuery的背景图像？

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)'); 
}); 
});

来源

2016-05-14 Adriana Cota

创建与

var myImage = new Image();

图像对象后分配一个图像的src将图像加载到浏览器缓存像这样：

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

现在它已经在浏览器缓存中了，只要你愿意，你可以将其添加到DOM：

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

来源

2016-05-14 23:17:18 haltersweb

非常感谢你，这么简单，它的工作原理！我为悬停的背景图像动画使用了CSS线性转换，它在我悬停时起作用，但不能用于鼠标悬停。我有任何选项可以在CSS中应用反转过渡，还是应该直接进行jQuery淡出？我不确定我可以用背景图像做到这一点。 –

@AdrianaCota尽管css中的动画背景不透明不被广泛支持，因为它不是一个CSS标准（https://www.w3.org/TR/css3-transitions/#animatable-css），有一种方法可以获得在这附近。这里是一个笔（http://codepen.io/haltersweb/pen/QNPVLq），我创建了一个带有子div的内容div来充当背景。当您将鼠标悬停在内容div上时，bknd div会在1秒内过渡不透明度。当鼠标移出时，转换进行到相反。悬停状态位于父级上，不透明度转换位于子级上。 – haltersweb

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

回答

相关问题