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

Question

我希望在HTML加载之前准备好我的背景图片。 但是，正在发生的事情是我的一些HTML元素，比如在后台加载图像之前加载了输入元素。

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

Answer 1

这不是你想要做的。

对于用户而言，这将导致可用性降低和缺乏响应能力。 您很快就会失去访问者让他们等待某事。在相反的方向上，用图像在背景中加载时用颜色填充空白点。

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

在Base64编码图像上

Here is a very good article 并将其包含在内。基本上你要做的就是将图片转换为文本，直接在HTML，JS和/或CSS中粘贴文本，然后浏览器将其重新转换为图像。

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

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

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

对于 CSS 图片（例如background-image），它将采用以下格式：

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

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

Answer 2

你必须延迟加载html部分。使用任何javascript图像预加载技术，如下所示：

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

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