The HTML preload attribute gives the browser an indication of how much of the media file should be loaded when the page loads.
Definition and Usage
➔ This helps optimize user experience and bandwidth usage.
➔ The browser may ignore this hint if the user's data saver is enabled, or if the autoplay attribute is present.
➔ The possible values for the preload attribute are:
- none: The browser will not preload any data (it will download it only when the user clicks to play).
- metadata: The browser can fetch its metadata (dimensions, duration, first frame, etc.). It's a good balance between performance and user experience.
- auto: The browser should download the entire media file, even if the user doesn't expect to use it.
➔ When the preload attribute is used with the <link> element in the <head> of a document, it tells the browser to start downloading an critical resource early in the page's lifecycle.
Syntax
//In HTML
<video controls preload="metadata" poster="myposter.jpg">
<source src="myvideo.mp4" type="video/mp4">
This browser does not support the video tag.
</video>
//In Link
<head>
<link rel="preload" href="myscript.js" as="script">
<link rel="preload" href="mystyles.css" as="style">
<link rel="stylesheet" href="mysmallstyle.css" />
</head>
//In JavaScript
//Attach preload script to the DOM.
const preloadLink = document.createElement("link");
preloadLink.href = "myscript.js";
preloadLink.rel = "preload";
preloadLink.as = "script";
document.head.appendChild(preloadLink);
//Use preload script in the body.
const preloadedScript = document.createElement("script");
preloadedScript.src = "myscript.js";
document.body.appendChild(preloadedScript);