使用link标签进行预加载

概述

html中的link标签一般用来引入css文件。但是也可以通过rel属性来进行预加载。本文记录下相关方法，供以后开发时参考，相信对其他人也有用。

基本方法

一般我们用下面的代码进行预加载背景图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div style="display:none;">
        <img src="pic1.jpg" alt="预加载图片1">
        <img src="pic2.jpg" alt="预加载图片2">
    </div>
</body>
</html>

但是上面的方法很繁琐，代码也不容易看懂。值得庆幸的是，可以向下面的示例那样利用link标签进行预加载css，js，image，MP4等资源。

<head>
  <meta charset="utf-8">
  <title>Video preload example</title>
  <link rel="preload" href="style.css" as="style">
  <link rel="preload" href="main.js" as="script">
  <link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4">
</head>
<body>
</body>

其中type是MIME类型，最好写一下。

基本上你能想到的资源都能放到href里面进行预加载：audio, document, embed, font, image, js, css, worker, video等。

跨域预加载

可以通过设置crossorigin属性进行跨域预加载。（同时需要服务器那边进行相应设置）

<head>
  <meta charset="utf-8">
  <title>Web font example</title>

  <link rel="preload" href="fonts/cicle_fina-webfont.eot" as="font" type="application/vnd.ms-fontobject" crossorigin="anonymous">
</head>
<body>

</body>

媒体查询预加载

在预加载的时候还可以进行媒体查询，当屏幕宽度达到某个条件的时候才预加载。

<head>
  <meta charset="utf-8">
  <title>Responsive preload example</title>

  <link rel="preload" href="bg-image-narrow.png" as="image" media="(max- 600px)">
  <link rel="preload" href="bg-image-wide.png" as="image" media="(min- 601px)">

  <link rel="stylesheet" href="main.css">
</head>
<body>
  <header>
    <h1>My site</h1>
  </header>
</body>

脚本化预加载

下面的示例将预加载一个js文件，但并不执行。

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

与onload进行配合

下面的例子很巧妙，代码也很精简，值得学习。

<link rel="preload" href="mystyles.css" as="style" onload="this.rel='stylesheet'">