在加载任何 html 元素之前加载图像答案

【问题标题】：Load images before loading any html element在加载任何 html 元素之前加载图像
【发布时间】：2013-12-28 19:11:48
【问题描述】：

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

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

【问题讨论】：

【解决方案1】：

这不是你想做的。

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

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

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

使用您最喜欢的图像编辑器将您的图像缩小到 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);

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

【讨论】：

【解决方案2】：

您必须延迟加载 html 部分。使用任何 javascript 图像预加载技术，例如：

var x=new Image(); 
x.src="whatever.jpg";

...然后，使用 $.load(...) 将任何进一步的 html 加载到最初为空的 div 中。

【讨论】：