javascript - 预加载 CSS 背景图像 [不能使用精灵]

Question

我有这个网站，用户通过更改很多 div 的背景图像来生成预览。问题是我第一次将背景图像更改为其他内容时，图像加载需要一点时间，但在那之后，如果我改回来，一切看起来都很顺利。

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

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

编辑：

如果我不清楚，我很抱歉。我正在创建的是一个角色创建屏幕。我想要做的是，当页面加载时，用户可以选择他们想要参加的比赛。当他们这样做时，我希望显示一个加载程序，并且我希望预加载与该比赛相关的所有图像。完成后，我想删除加载器，然后用户可以进一步自定义他们的角色。

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

score 1 · Accepted Answer

1

使用 js 页面加载后缓存它们。

于 2012-07-14T18:16:17.863 回答

score 1 · Accepted Answer

请参阅此处：仅 CSS 图像预加载 - 关键是将所有需要的图像作为背景加载到其他 div 中，但 div 被“隐藏”在页面之外。

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

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

score 0 · Accepted Answer

如果您想在没有 javascript 的情况下执行此操作 - 放入 html invisible 的唯一方法<img>。像这样：

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

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

score 0 · Accepted Answer

预加载图像的 Javascript 方式：

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

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

score 0 · Accepted Answer

我会为此使用 Web Worker，并在单独的线程中在后台预加载所有图像。使用它您不会阻塞浏览器 UI，并且当工作人员完成后，您可以使用图像。

5 回答 5