Question

我有这个网站，用户可以通过更改div的背景图像来生成预览。问题是，第一次将背景图像更改为其他内容时，图像加载需要一段时间，但在此之后，如果我改回来，一切看起来都非常流畅。

我打算使用CSS sprites来消除这个问题，但是当我尝试它时，一些浏览器几乎冻结了，因为它们无法处理那些大图像。

所以我的问题是，如何在不使用CSS精灵的情况下预加载这些特定的背景图像？

修改

如果我不清楚，我道歉。我正在创建的是一个角色创建屏幕。我想要做的是，当页面加载时，用户可以选择他们想要的种族。当他们这样做时，我想要一个装载器出现，我想要预先加载连接到该种族的所有图像。完成后，我想删除加载器，然后用户可以进一步自定义其角色。

当用户自定义角色时，角色div上的背景图像会更改为其中一个预加载的图像。我尝试使用下面描述的 Rustam 方法使用JavaScript加载图像，但我得到了相同的结果。第一次显示背景图像时，需要一秒钟才能加载。

Answer 1

用js加载页面后捕获它们。

Answer 2

如果你想在没有javascript的情况下这样做 - 唯一的方法就是放入html隐形<img>。像这样：

<div style="overflow:hidden;height:0;"><img/><img/><img/><img/></div>

但是div必须不隐藏display:none，visibility:hidden，因为在这种情况下某些浏览器无法加载它。

Answer 3

请参阅此处：CSS Only Image Preloading - 关键是将所有必需的图像作为背景加载到其他div中，但div在页面上“隐藏”。

将图像加载到元素的常规状态，仅将其移除背景位置。然后移动背景位置以显示它在悬停。

#img1 { background: url(images/img1.png) no-repeat -9999px -9999px; }
#img2 { background: url(images/img2.png) no-repeat -9999px -9999px; }

Answer 4

Javascript预加载图片的方式：

var img = document.createElement("img");
img.setAttribute('src', 'image_path');

// Load event
img.onload=function(){ alert("It's loaded!") };

Answer 5

我会使用Web Workers，并在一个单独的线程中预加载后台的所有图像。使用此功能，您不会阻止浏览器UI，当工作人员完成后，您可以使用图像。