关于我 归档
RSS

在 Web 应用程序中预加载图像的 5 种方法

前端

随着 Web 应用的 API 越来越丰富，以及设备性能的提升，可以通过预加载图片来优化用户体验 (UX)。本文介绍了 Web 应用中预加载图片的几种方法。

原理

Web 应用程序基于 HTTP/HTTPS 运行。预加载涉及将网页所需的资源写入浏览器或磁盘缓存，以便页面在需要资源时直接从缓存中读取。

何时需要预加载

预加载在以下场景中特别有用：

  • 通过用户交互打开带有背景图像的弹出窗口
  • 在页面之间切换，由于需要加载新图像或未预加载时导致闪烁，因此可能很耗时
  • 提前知道近期将需要特定的静态图像
  • …

实现预加载

方法 1:<link preload>

“Preload” 是 <link> 元素的 rel 属性的关键字，表示浏览器应该预取并缓存资源，因为用户在当前浏览会话期间很有可能需要它。

示例：

example
1
2
3
<head>
  <link rel="preload" as="image" href="https://xxx.xxx.com/a.jpg" />
</head>

在标头中插入一个 <link> 元素，其中包含 rel="preload"、as="image" 和资源 URL 的 href 属性。可以使用 <link preload> 元素预加载多种类型的静态资源（有关更多信息，请参阅 as 属性文档）。

通过 JavaScript 实现预加载

example
1
2
3
4
5
6
7
const preload = (src: string) => {
  const link = document.createElement("link");
  link.setAttribute("rel", "preload");
  link.setAttribute("as", "image");
  link.setAttribute("href", src);
  document.head.appendChild(link);
};

对于 Next.js 用户，内置的 next/head 组件可以轻松修改 HTML 文档的标题。官方文档

example
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import Head from 'next/head'

function IndexPage() {
  return (
    <div>
      <Head>
        <title>My page title</title>
        <link rel="preload" as="image" href="https://xxx.xxx.com/a.jpg">
      </Head>
      <p>Hello world!</p>
    </div>
  )
}

export default IndexPage

您可以将状态附加到链接或使用数组预加载多个图像资源，具体取决于您组织代码逻辑的方式。

在链接类型：预加载中了解有关预加载属性的规范和兼容性的更多信息。

方法 2:new Image()

预加载图像的一个更简单的方法是使用 new Image() 构造函数创建一个 <img /> 元素。

example
1
2
3
4
const preloadImage = (src: string) => {
  const img = new Image();
  img.src = src;
};

此代码紧急运行，在调用“preloadImage”时立即触发浏览器检索图像资源。

方法 3: XHR

与方法 2 类似，我们可以使用主动调用 XHR 预先加载资源。

example
1
2
3
4
5
6
const preloadImage = (src: string) => {
  const xhr = new XMLHttpRequest();
  xhr.responseType = "blob";
  xhr.open("GET", src, true);
  xhr.send();
};

在这个例子中，我们没有对通过 XHR 检索的图像资源进行任何处理，但您可以使用 URL.createObjectURL() 来使用它。

方法 4: CSS

使用 CSS 加载资源需要使用 CSS。此方法不如上面列出的其他方法灵活。
当浏览器解析正在使用的静态资源的 CSS 规则时，它将自动加载资源。

example
1
2
3
.example {
    background-image: url('https://xxx.xxx.com/a.jpg');
}

方法 5: 不可见元素

在 HTML 中插入元素将触发浏览器解析其样式并加载任何所需的静态资源。

example
1
2
3
4
5
const preloadImage = (src: string) => {
  const Element = document.createElement("div");
  Element.setAttribute("style", `background-image: url('${src}')`);
  document.body.appendChild(Element);
};

以上就是我们对在 Web 应用程序中预加载图像的几种方法的介绍。我们希望它能帮助您改善 Web 应用程序的用户体验。

#HTML #JavaScript #Preload