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

我有一个网页，我想切换div的背景图像以响应用户交互。我到目前为止是：在jquery中切换div背景之前加载图像

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

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

背景图像由服务器即时生成，因此任何类型的客户端缓存或预加载都是不可能的。

来源

2009-06-24 dagw

将图像设置为空元素怎么样？

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

然后，当图像被加载

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

这种方式，图像将被装入一个永远不会被显示的图像，并设置为背景当图像完全加载（和也缓存）

还没有测试过这个，但我认为它应该工作。

来源

2009-06-24 14:00:26 peirix

您可以使用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]); 
}

来源

2009-06-24 13:50:07 Peter

如果图像是由服务器基于用户输入在运行中创建的，那么这是不可能的... – peirix 2009-06-24 14:01:20

糟糕，没有意识到BG图像将基于用户输入来生成。 – Peter 2009-06-24 14:37:32

-1

既然你不能预取你的形象，你可以这样做：

预取“加载..“图片
设置”加载..“图像作为你的div的背景，而哟你的实际形象是烹饪
一旦你的实际形象可用，做你的东西。

请不要问我为它写jQuery。它很简单:)

干杯，

jrh。

来源

2009-06-24 13:51:29 jrharshath

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

回答

相关问题