<head>
<meta charset="utf-8">
<title>JS and CSS preload example</title>
// 1. 瀏覽器可以預先加載style.css, main.js的資源
<link rel="preload" href="style.css" as="style">
<link rel="preload" href="main.js" as="script">
// 2. 使用style.css樣式
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>bouncing balls</h1>
<canvas></canvas>
// 3. 使用main.js文件
<script src="main.js"></script>
</body>
哪些類型的內容可以被預加載
音頻文件。
document: 一個將要被嵌入到<frame>或<iframe>內部的HTML文檔。
embed: 一個將要被嵌入到<embed>元素內部的資源。
fetch: 那些將要通過fetch和XHR請求來獲取的資源，比如一個ArrayBuffer或JSON文件。
font: 字體文件。
image: 圖片文件。
object: 一個將會被嵌入到<embed>元素內的文件。
script: JavaScript文件。
style: 樣式表。
track: WebVTT文件。
worker: 一個JavaScript的web worker或shared worker。
視頻文件。
包含一個MIME類型
<head>
<meta charset="utf-8">
<title>Video preload example</title>
<link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4">
</head>
<body>
<video controls>
<source src="sintel-short.mp4" type="video/mp4">
<source src="sintel-short.webm" type="video/webm">
<p>Your browser doesn't support HTML5 video. Here is a <a href="sintel-short.mp4">link to the video</a> instead.</p>
</video>
</body>
異步獲取
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web font example</title>
<link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="fonts/zantroke-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Hipster ipsum is the best</h1>
<p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
<p>Cray food truck brunch, XOXO +1 keffiyeh pickled chambray waistcoat ennui. Organic small batch paleo 8-bit. Intelligentsia umami wayfarers pickled, asymmetrical kombucha letterpress kitsch leggings cold-pressed squid chartreuse put a bird on it. Listicle pickled man bun cornhole heirloom art party.</p>
<h2>It is the quaintest</h2>
<p>Bespoke green juice aesthetic leggings DIY williamsburg selvage. Bespoke health goth tote bag, fingerstache venmo ennui thundercats butcher trust fund cardigan hella. Wolf vinyl you probably haven't heard of them taxidermy, ugh quinoa neutra meditation asymmetrical mixtape church-key kitsch man bun occupy. Knausgaard butcher raw denim ramps, offal seitan williamsburg venmo gastropub mlkshk cardigan chillwave chartreuse single-origin coffee twee. Ethical asymmetrical banjo typewriter fap. Polaroid waistcoat tousled selfies four dollar toast locavore thundercats. Truffaut post-ironic skateboard trust fund.</p>
<h2>No, really...</h2>
<p>Trust fund celiac farm-to-table PBR&B. Brunch art party mumblecore, fingerstache cred echo park literally stumptown humblebrag chambray. Mlkshk vinyl distillery humblebrag crucifix. Mustache craft beer put a bird on it, irony deep v poutine ramps williamsburg heirloom brooklyn.</p>
<p>Taxidermy tofu YOLO, sustainable etsy flexitarian art party stumptown portland. Ethical williamsburg retro paleo. Put a bird on it leggings yuccie actually, skateboard jean shorts paleo lomo salvia plaid you probably haven't heard of them.</p>
</body>
</html>
包含媒體查詢
節
<link>元素有一個很棒的特性是它們能夠接受一個media屬性。它們可以接受媒體類型或有效的媒體查詢作爲屬性值，這將令你能夠使用響應式的預加載！
讓我們來看一個簡單的示例（可以查看Github上的源代碼或在線示例）：
<head>
<meta charset="utf-8">
<title>Responsive preload example</title>
<link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)">
<link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)">
<link rel="stylesheet" href="main.css">
</head>
<body>
<header>
<h1>My site</h1>
</header>
<script>
var mediaQueryList = window.matchMedia("(max-width: 600px)");
var header = document.querySelector('header');
if(mediaQueryList.matches) {
header.style.backgroundImage = 'url(bg-image-narrow.png)';
} else {
header.style.backgroundImage = 'url(bg-image-wide.png)';
}
</script>
</body>
腳本化與預加載
如果需要，你可以完全以腳本化的方式來執行這些預加載操作
var preloadLink = document.createElement("link");
preloadLink.href = "myscript.js";
preloadLink.rel = "preload";
preloadLink.as = "script";
document.head.appendChild(preloadLink);
需要預加載一個腳本，但需要推遲到需要的時候才令其執行時，這種方式會特別有用
var preloadedScript = document.createElement("script");
preloadedScript.src = "myscript.js";
document.body.appendChild(preloadedScript);
不過過要注意 **preload ** 瀏覽器兼容