我是JQuery的新手，我正在尝试用它做一个概念验证。我正在尝试使用JQuery：1）下载一个大的（> 500kb）图像文件2）将图像设置为下载时元素的背景3）淡入它（基本上就像Bing.com那样）。正如here所示，StackOverflow社区已经慷慨地帮助了我解决这个问题。但是，我仍然有一个我无法弄清楚的问题。
如何将下载的图像作为HTML元素的背景图像？我在http://jqueryfordesigners.com/image-loading/看到的代码将图像元素附加到DIV。但是，我想将图像设置为DIV的背景图像，一旦下载并淡入其中。这可能吗？我似乎继续围绕这个问题。谢谢。
答案 0 :(得分：5)
在width: 100%; height: 100% #loader中添加额外的div（<div id="loader"><div class="image"></div></div>}。
然后，您应该使用$("#loader").append(this);而不是$("#loader div.image").css("background","url(images/headshot.jpg) no-repeat 0 0");。这样，img元素将在文档树中保持不可见，但背景 - 希望缓存，至少大多数浏览器都会这样做 - 将显示在您的div中。
然后，最后，使用.fadeIn()对您的内部div进行效果。
我自己没试过，但必须是这样的。
答案 1 :(得分：0)
假设您正在使用浏览器下载图像，一旦拥有它，它就在浏览器的缓存中。将DIV的背景图像设置为图像的URL不应该再次下载，而是从缓存中加载它。然后你可以丢弃你的图像对象。
但是，我不知道如何将过渡效果应用于CSS背景图像。如果淡入是一项艰难的要求，最好将DIV的背景颜色设置为透明，并将图像元素绝对放在DIV后面。然后你可以使用普通的jQuery技术淡化它。
答案 2 :(得分：0)
正如我在回答这个问题时所说。下载后，它位于缓存中，因此不会再次下载。
答案 3 :(得分：-1)
实际上，你所要做的就是
$("#myDiv").css({background-image: "url('http://someserver.com/someImage.jpg')"})
您可以完全跳过“下载”部分，因为浏览器会处理这个问题。