Question

我有一个网页，我想切换div的背景图片以响应用户交互。到目前为止我所拥有的是：

function updateImg() { 
   imgurl=buildImgURL(); // constructs a URL based on various form values
   $('#mainImage').css("background-image", "url("+imgurl+")");
}

这完全像我想要的那样，除了一件事。由于相对较大的背景图像和相对较慢的服务器（两者都不容易修复）的组合，图像加载需要一段时间。因此，当调用updateImg（）函数时，div会在加载新背景图像之前变为白色半秒左右。我想要的是旧的背景图像保持到新图像加载完毕然后立即切换。这可能吗？

服务器动态生成背景图像，因此无法进行任何类型的客户端缓存或预加载。

Answer 1

如何将图像设置为空元素？

$("<img id='loaderImg' src='"+imgUrl+"' onload='setBg(this.src)'/>");

然后加载图像

function setBg(imgUrl) {
    $("#mainImage").css("background-image", "url("+imgUrl+")");
    $("#loaderImg").remove();
}

这样，图像将被加载到永远不会显示的图像中，并在图像完全加载（并缓存）时设置为背景

没有对此进行测试，但我认为它应该可行。

Answer 2

您可以使用设置为image的background-image属性定义CSS类，然后在updateImg（）函数中设置该div的类，而不是直接修改属性。这可能会缓解这个问题。

类似的东西：

function updateImg() { 
  imgurl=buildImgURL(); // constructs a URL based on various form values
  $('#mainImage').addClass('imageClassName');
}

然后在你的CSS中：

.imageClassName {
  background-image: url([url to image]);
}

Answer 3

由于您无法预取图像，因此可以执行以下操作：

预取“loading ..”图片
在实际图像烹饪时将“loading ..”图像设置为div的背景
一旦你的实际图像可用，就做你的东西。

请不要让我为它编写jQuery。它很简单：）

干杯，

JRH。

在jquery中切换div背景之前加载图像

3 个答案: