Recents

Advertisement

Catalogue

5 Ways to Preload Images in Web Applications
2022-12-17Front-End4 minutes read (About 585 words)0 visits

5 Ways to Preload Images in Web Applications

With the increasingly rich API of web applications and improved device performance, user experience (UX) can be optimized by preloading images. This article introduces several ways to preload images in web applications.

Principles

Web applications function based on HTTP/HTTPS. Preloading involves writing the resources needed for a web page into the browser or disk cache, allowing the page to read from the cache directly when the resources are needed.

When Do We Need Preloading

Preloading is particularly useful in the following scenarios:

  • Opening a popup window with a background image via user interaction
  • Switching between pages, which may be time-consuming due to the need to load new images or cause a flicker if not preloaded
  • Knowing in advance that a particular static image will be needed in the near future
  • …

Implementing Preloading

“Preload” is a keyword for the rel attribute of the <link> element, indicating that the browser should pre-fetch and cache the resource, as there’s a high chance the user will need it during the current browsing session.
Example:

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

Insert a <link> element with rel="preload", as="image", and an href attribute for the resource URL within the header. Multiple types of static resources can be preloaded with the <link preload> element (refer to the as attribute documentation for more information).

Implement Preload Through 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);
};

For Next.js users, the built-in next/head component allows easy modification of the HTML document’s header. Official documentation

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

You can attach state to your link or preload multiple image resources using an array, depending on how you organize your code logic.

Read more about the specifications and compatibility of the preload attribute inLink types: preload.

Method 2:new Image()

A simpler way to preload images is to create an <img /> element with the new Image() constructor.

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

This code runs eagerly, immediately triggering the browser to retrieve the image resource when preloadImage is called.

Method 3: XHR

Similar to method 2, we can cache resources using 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();
};

In this example, we didn’t perform any processing on the image resource retrieved via XHR, but you can use URL.createObjectURL() to employ it.

Method 4: CSS

Using CSS to load resources requires the CSS to be used. This method is less flexible than others listed above.
When the browser parses CSS rules with static resources that are being used, it will load the resources automatically.

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

Method 5: Non-Visible Elements

Inserting an element into HTML will trigger the browser to parse its style and load any required static resources.

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);
};

That concludes our introduction to several ways to preload images in web applications. We hope it helps improve your web app UX.

5 Ways to Preload Images in Web Applications

https://lynan.cn/5-ways-to-preload-images/

Author

Lynan

Posted on

2022-12-17

Licensed under

#

Comments

×