在加载任何html元素之前先加载图片 [英] Load images before loading any html element

问题描述

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

I would like to have my background images ready before the HTML loads. But, what is happening is some of my HTML elements like input elements are being loaded before the image is loaded in the background.

我看了很多问题，它们显示了如何预加载图像.但是，有些问题无法解决我的问题.

I have looked at lot of questions where they show how to preload the image. But, that some how doesn't solve my issue.

推荐答案

这不是您想要的.

对于用户而言，这将导致可用性降低和响应速度不足.您会很快失去访客，让他们等待一些事情.以相反的方向，并在图像加载到背景中的同时用一种颜色填充空白点.

This is not what you want to do.

For the user this will result in decreased usability and a lack of responsiveness. You'll lose visitors very quickly making them wait for something. Take it the opposite direction and fill in the empty spot with a color while the image loads in the background.

但是 ，如果您确实要执行此操作，则可以使用一种方法将它们全部同时排列并加载.您可以将图像转换为Base64编码，然后将代码直接粘贴到HTML或CSS中.

However, if you really want to do this, there is a way to line them all up and load at the same time. You can convert your images to Base64 encoding and paste the code directly into the HTML or CSS.

这是一篇有关Base64编码图像的很好的文章 并内联包含它们.本质上，您要做的就是将图片转换为文本，然后将文本直接粘贴到HTML，JS和/或CSS中，然后浏览器将其转换回图像.

Here is a very good article on Base64 encoding images and including them inline. Essentially what you'll be doing is turning a picture into text, pasting that text directly in your HTML, JS and/or CSS and then the browser turns it back into an image.

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

Use your favorite image editor and get your images down to < 32KB, then upload them to this page that will convert it into a long string of characters. If they are larger than 32KB you'll notice browser performance issues as well as incompatibility with Internet Explorer.

您将采用该字符串并将其直接粘贴到通常放置图像URL的位置.因此，如果它以 HTML 的形式显示为独立图片，您会说:

You'll take that string of characters and paste it directly where you would normally put the image URL. So if it's in HTML as a standalone image, you would say:

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

对于 CSS 图片(例如 background-image )，它将采用以下格式:

For a CSS image (background-image, for example) it would follow this format:

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

现在，根据您在每个文件中包含多少个文件以及它们的大小，您的站点一开始下载速度不是很快，但是在缓存之后将不会是一个明显的问题.

Now, depending on how many you include in each file and how large they are, your site will not be very fast to download at first but after caching it won't be a noticeable issue.

这篇关于在加载任何html元素之前先加载图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！