JQuery -将背景图像设置为图像对象

Question

我刚接触JQuery，我正试着用它做一个概念验证。我正在尝试使用JQuery来: 1)下载一个大的(>500kb)图像文件2)在下载时将图像设置为元素的背景3)淡入(基本上是Bing.com做的方式)。正如here所示，StackOverflow社区帮助我解决了这个问题。然而，我仍然有一个问题是我无法解决的。

如何使下载的图片成为HTML元素的背景图片？我在http://jqueryfordesigners.com/image-loading/中看到的代码将图像元素附加到DIV.但是，我想要将图像设置为DIV下载后的背景图像，然后淡入。这个是可能的吗？在这个问题上，我似乎一直在兜圈子。谢谢。

Answer 1

在#loader：<div id="loader"><div class="image"></div></div>中添加额外的div (带有width: 100%; height: 100%)。

然后，您应该使用类似于$("#loader div.image").css("background","url(images/headshot.jpg) no-repeat 0 0");的内容而不是$("#loader").append(this);。这样，img元素将在文档树之外保持不可见，但背景将显示在您的div中，希望缓存，至少大多数浏览器会这样做。

然后，最后，用.fadeIn()在你的内部div上做效果。

我自己没有试过，但一定是这样的。

Answer 2

假设您正在使用浏览器下载图像，一旦您有了它，它就在浏览器的缓存中。将DIV的背景图像设置为图像的URL不应该第二次下载它，而是直接从缓存中加载它。然后，您可以丢弃您的图像对象。

但是，我不知道有什么方法可以将过渡效果应用于CSS背景图像。如果淡入是一个很难的要求，最好将DIV的背景颜色设置为透明，并将图像元素绝对定位在DIV后面。然后你可以使用普通的jQuery技术淡出它。

Answer 3

正如我在回答这个问题时所说的那样。下载后，它在缓存中，因此不会再次下载。