javascript - 在加载任何 html 元素之前加载图像

Question

我想在加载 HTML 之前准备好我的背景图片。但是，正在发生的事情是我的一些 HTML 元素(例如输入元素)在图像加载到后台之前被加载。

我看过很多问题，它们展示了如何预加载图像。但是，这并不能解决我的问题。

Answer 1

这不是你想做的。

对于用户来说，这将导致可用性下降和缺乏响应能力。 您会很快失去访问者，让他们等待。当图像在背景中加载时，将其反方向并用颜色填充空白点。

但是，如果您真的想这样做，有一种方法可以将它们全部排列起来并同时加载。您可以将图像转换为 Base64 编码并将代码直接粘贴到 HTML 或 CSS 中。

Here is a very good article 基于 Base64 编码图像并将它们内联。本质上，您要做的是将图片转换为文本，将该文本直接粘贴到您的 HTML、JS 和/或 CSS 中，然后浏览器将其转换回图像。

使用您最喜欢的图像编辑器，将您的图像缩小到 < 32KB，然后 upload them to this page 会将其转换为一长串字符。如果它们大于 32KB，您会注意到浏览器性能问题以及与 Internet Explorer 的不兼容。

您将获取该字符串并将其直接粘贴到您通常放置图像 URL 的位置。因此，如果它在 HTML 中作为独立图像，您会说:

<img src="data:image/png;base64,iVBORw0KGgoAAAA... etc" />

对于 CSS 图像(例如 background-image)，它将遵循以下格式:

background-image: url(data:image/png;base64,iVBORw0KGgoAAAA... etc);

现在，根据您在每个文件中包含的数量和文件的大小，您的网站一开始下载速度不会很快，但在缓存后这将不是一个明显的问题。