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

Question

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

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

Answer 1

将额外的 div(带有 width: 100%; height: 100% )放入 #loader 中:<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 进行效果.

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