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

我是JQuery的新手，我试图用它做一个概念验证。我试图使用JQuery来：1）下载一个大的（> 500kb）图像文件2）将图像设置为一个元素的背景，当下载时3）淡入（基本上是Bing.com的方式）。 StackOverflow社区慷慨地帮助我解决这个问题的大部分方法，如here所示。但是，我仍然有一个我无法弄清楚的问题。JQuery - 将背景图像设置为图像对象

如何让下载的图像的HTML元素的背景图像？我在http://jqueryfordesigners.com/image-loading/看到的代码将图像元素附加到DIV。但是，我想将图像设置为一次下载的DIV的背景图像并淡入。这是可能的吗？我似乎在这个圈子里继续前进。谢谢。

来源

2009-06-11 Villager

将额外的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()内格的效果。

还没有我自己试过，但它必须是这样的。

来源

2009-06-11 17:22:01 drdaeman

假设你正在使用的浏览器下载图像，一旦你拥有了它，它在浏览器的缓存。将DIV的背景图像设置为图像的URL不应再次下载，而应从缓存中加载。然后你可以放弃你的图像对象。

不过，我不知道的方式采取过渡效果CSS背景图像。如果淡入是一个很难的要求，最好将DIV的背景颜色设置为透明，并将图像元素完全放置在DIV后面。然后你可以使用普通的jQuery技术来淡化它。

来源

2009-06-11 17:19:40

-1

事实上，所有你需要做的是一样的东西

$("#myDiv").css({background-image: "url('http://someserver.com/someImage.jpg')"})

您可以完全跳过“下载”部分，因为浏览器将采取照顾。

来源

2009-06-11 17:21:23 chris166

正如我所理解的那样，Villager希望在图像最终加载时具有花哨的淡入效果。也可能是旋转的“加载...”动画。 – drdaeman 2009-06-11 17:28:34

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

来源

2009-06-11 17:26:39

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

回答

相关问题