预加载图像的最佳方式

要改善您网站上的用户体验，您可以做的最重要的事情之一就是确保人们不会花时间等待图像或其他元素的加载。

网页及其所有内容的加载速度取决于很多因素，其中一些因素是您无法控制的。但是，作为 Web 开发人员，我们应该尽最大努力使浏览体验尽可能无缝。

在本教程中，我将向您展示在网页上预加载图像以获得流畅用户体验的不同技术，使用 javascript、css 和 html 预加载图像的最佳方式。

预加载图像的需要

我们将首先讨论为什么您可能需要预加载图像来开始本教程。

假设您正在为房地产经纪人建立一个投资组合网站，他们可以在其中展示待售房屋。代理人希望您显示带有房屋外观图像的房屋清单。他们还希望您以这样一种方式设计页面：将鼠标悬停在房屋图像上会加载房屋内部的另一幅图像，并带有查看所有其他图像的链接。

这里的问题是，只有当用户将鼠标悬停在图像上时，房屋内部的图像才会开始加载。这意味着他们在初始悬停事件后的几分钟内看不到任何图像，具体取决于他们的互联网速度。您可以在以下 CodePen 演示中看到此问题：

See the Pen  Not Preloading Images by Monty (@Shokeen)  on CodePen.

预加载图像将避免悬停时图像加载的这种延迟。此外，一些大图像可能需要一段时间才能加载，因此最好预加载它们以获得更好的用户体验。

使用 HTML 预加载图像

您可能已经熟悉linkHTML 中的标记。我们一般用它来加载外部CSS样式表，但你也可以用它来加载其他类型的资源。

link标签有两个重要的属性：

1. 属性，href用于提供我们要获取的资源的路径

2. rel属性，指定资源与包含文档的关系

使用 CSS 样式表，链接标记如下所示：

<link  rel= "stylesheet"  href= "navigation.css"  />

该rel属性可以采用很多有效值。其中之一是preload，我们将使用它来预加载图像。该preload属性告诉浏览器在当前页面需要时抢先获取和缓存链接资源。

as当属性的值rel设置为时，您还需要该属性preload。这将指定link标签加载的内容类型。此属性有许多重要用途，例如应用正确的内容安全策略、请求的优先级等。跳过它可能会阻止您的图像被预加载。

我们将在以下div元素中加载图像：

<div  class= "hover-me" ></div>

然后将以下 CSS 应用于该div元素。如您所见，只要有人将鼠标悬停在该div元素上，背景图像 URL 就会发生变化。

div.hover-me {
  width: 640px;
  height: 360px;
  background: url("https://picsum.photos/id/128/1920/1080");
  background-size: contain;
  cursor: pointer;
  margin: 0 auto;
  position: relative;
}
div.hover-me::before {
  content: "Lake";
  background: black;
  color: white;
  position: absolute;
  top: 0.75rem;
  left: 1rem;
  padding: 0.5rem;
  font-size: 1.5rem;
  border-radius: 5px;
}
div.hover-me:hover {
  background: url("https://picsum.photos/id/296/1920/1080");
  background-size: contain;
}
div.hover-me:hover::before {
  content: "Mountains";
}

当我们将鼠标悬停在div元素上时显示的图像是使用以下标记预加载的。理想情况下，您应该将标签放在网页的link标签内。head

<link  rel= "preload"  as= "image"  href= "https://picsum.photos/id/296/1920/1080"  />

以下 CodePen 演示展示了图像预加载的实际效果：

See the Pen  Preloading Images Using HTML by Monty (@Shokeen)  on CodePen.

使用 CSS 预加载图像

在上一节中您可能已经注意到，我们使用的两个图像实际上都作为 a 应用于background元素div。但是，浏览器只下载了其中一个。悬停时应用的图像background仅在hover事件发生后才下载。

在上一节中，我们借助 HTML 强制下载悬停图像。但是，我们也可以通过将悬停图像作为背景图像应用到网页上的另一个元素来欺骗浏览器下载悬停图像。另一种选择涉及将图像 URL 设置为content属性的值。

我更喜欢将body元素与伪元素一起::before使用。::after我要下载的 URL 将被设置为content任何伪元素的属性值。

这里要记住的一件重要事情是，我们需要将伪元素推离屏幕很远，以防止它们的内容意外出现在屏幕上。下面的 CSS 为我们处理了这一切：

body::before {
  content: url("https://picsum.photos/id/296/1920/1080");
  position: absolute;
  top: -9999rem;
  left: -9999rem;
  opacity: 0;
}

我还设置了opacityto0作为预防措施。请记住，您不应将display属性设置none为隐藏元素。在这种情况下，浏览器更有可能根本不下载图像。

您可以看到我们在悬停时需要的图像已在以下 CodePen 演示中预加载：

See the Pen  Preloading Images Using CSS by Monty (@Shokeen)  on CodePen.

使用 JavaScript 预加载图像

也可以使用 javaScript 预加载图像。此方法使您可以最大程度地控制预加载图像的方式。在需要加载大量图片的情况下，使用 JavaScript 预加载图片也更方便。但是，如果在浏览器中禁用 JavaScript 执行，它将不起作用。

以下函数可以帮助我们在 JavaScript 中预加载任何图像。

function preload_image(im_url) {
  let img = new Image();
  img.src = im_url;
}

该函数接受您要预加载的图像的路径作为参数。在函数内部，我们使用图像构造函数创建一个新的实例HTMLImageElement。创建图像元素实例后，我们将其src属性的值设置为我们要预加载的图像的路径。

现在所需要的只是对该preload_image()函数的调用，如下所示：

preload_image ( " https://picsum.photos/id/296/1920/1080 " );

您可以在以下 CodePen 演示中看到 JavaScript 图像预加载：

See the Pen  Preloading Images Using JavaScript by Monty (@Shokeen)  on CodePen.

最后的想法

在本教程中，我们学习了三种不同的预加载图像技术。在 HTML 中使用link标签可以让我们尽早开始加载图像。另一方面，当你想预加载多个图像时，使用 JavaScript 会方便得多。您还可以控制使用 JavaScript 预加载图像的顺序。这样，我们可以确保图像预加载不会阻止主要内容先加载。