link标签预加载资源

多啦-A萌

已于 2023-06-06 19:04:09 修改

阅读量1.3k

点赞数 3

文章标签： javascript 前端开发语言

于 2023-06-06 19:03:19 首次发布

本文链接：https://blog.csdn.net/zai329979994639/article/details/131074158

版权

link标签预加载资源【js、css、img…]

link标签通常用来引入css文件。也可以通过rel=preload属性来进行预加载

link预加载用法

预加载图片例子：

方案1

通过img标签预加载图片img1、img2

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

缺点：方法繁琐，代码不容易看懂。可通过方案2link标签进行预加载css，js，image…等资源

方案2

点击按钮加载图片秒出
去除<link rel="preload" href="img1" as="image" />图片加载展示卡顿

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="preload" href="img1" as="image" />
</head>

<body>
  <button id="button" onclick="loadImg()">加载图片</button>
  <img alt="预加载图片1">
  <script>
    function loadImg() {
      const img = document.getElementsByTagName('img')[0];
      img.src="img1"
    }
  </script>
</body>
</html>

link标签进行预加载css，js，image…等资源

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>preload</title>
    <link rel="preload" href="main1.css" as="style">
    <link rel="preload" href="main1.js" as="script">
    <link rel="preload" href="video1.mp4" as="video" type="video/mp4">
  </head>
  <body>
  </body>
</html>

type是MIME类型
资源都能通过 link 中 href 预加载：
audio, document, embed, font, image, js, css, worker, video…。

预加载设置跨域

前端link标签通过设置crossorigin=anonymous属性进行跨域预加载
服务器需要进行相应设置

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="preload" href="url1" as="img" crossorigin="anonymous">
  </head>
  <body>
  </body>
</html>

媒体查询预加载

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Responsive preload example</title>

    <link rel="preload" href="img1.png" as="image" media="(max-width: 600px)">
    <link rel="preload" href="img2.png" as="image" media="(min-width: 601px)">

    <link rel="stylesheet" href="main.css">
  </head>
  <body>
    <header>
    </header>
  </body>
</html>