概述

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

参考资料：

mdn 通过rel="preload"进行内容预加载

基本方法

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

<!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-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>

</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'">

使用link标签进行预加载的更多相关文章

  1. html预加载之link标签

    我们之前提及过link rel 里面有preload和prefetch.modulepreload,都是用于预加载资源 <link rel="preload" href=&q ...

  2. HTML5的页面资源预加载技术(Link prefetch)加速页面加载

    不管是浏览器的开发者还是普通web应用的开发者,他们都在做一个共同的努力:让Web浏览有更快的速度感觉.有很多已知的技术都可以让你的网站速度变得更快:使用CSS sprites,使用图片优化工具,使用 ...

  3. 使用HTML5的页面资源预加载(Link prefetch)功能加速你的页面加载速度

    不管是浏览器的开发者还是普通web应用的开发者,他们都在做一个共同的努力:让Web浏览有更快的速度感觉.有很多已知的技术都可以让你的网站速度变得更快:使用CSS sprites,使用图片优化工具,使用 ...

  4. 用javascript预加载图片、css、js的方法研究

    预加载的好处可以让网页更快的呈现给用户,缺点就是可能会增加无用的请求(但图片.css.js这些静态文件可以被缓存),如果用户访问的页面里面的css.js.图片被预加载了,用户打开页面的速度会快很多,提 ...

  5. 页面资源预加载(Link prefetch)功能加速你的页面加载速度

    有了浏览器缓存,为何还需要预加载? 用户可能是第一次访问网站,此时还无缓存 用户可能清空了缓存 缓存可能已经过期,资源将重新加载 用户访问的缓存文件可能不是最新的,需要重新加载 页面资源预加载/预读取 ...

  6. 通过link的preload进行内容预加载

    Preload 作为一个新的web标准,旨在提高性能和为web开发人员提供更细粒度的加载控制.Preload使开发者能够自定义资源的加载逻辑,且无需忍受基于脚本的资源加载器带来的性能损失. <l ...

  7. js原生图片懒加载 或 js原生图片预加载，html标签自定义属性

    使用原声js来实现图片预加载,或图片懒加载,小伙伴们可以根据项目需要来结合vue或者是react来进行修改. 一.什么是图片懒加载或什么是图片预加载 当访问一个页面的时候,先把img元素或是其他元素的 ...

  8. 详解HTML5中rel属性的prefetch预加载功能使用

    在HTML5中,有个很有用但常被忽略的特性,就是预先加载(prefetch),它的原理是: 利用浏览器的空闲时间去先下载用户指定需要的内容,然后缓存起来,这样用户下次加载时,就直接从缓存中取出来,效率 ...

  9. HTML5 prefetch即预加载

    原文地址 声明:此文带着自己的理解,不完全按原文翻译 prefetch 即预加载,在用户需要前我们就将所需的资源加载完毕. 有了浏览器缓存,为何还需要预加载? 用户可能是第一次访问网站,此时还无缓存 ...

随机推荐

  1. ionic3问题记录

    1.Ionic3 websocket 启动没问题,编译的时候报错 events.js:136thrower;// Unhandled 'error' event^Error: read ECONNRE ...

  2. Lonsdor K518ISE SCION 2011-2018 Models Enabled!

    Lonsdor released the Lonsdor K518ISE Key Programmer update announcement on 14-03-2019, saying it can ...

  3. python 打包成 windows .EXE

    1. 升级pip python -m pip install --upgrade pip 2.安装 pyinstall (打包程序) pip install pyinstaller 3 开始打包(打包 ...

  4. mysql_事物

    1) set autocommit=0  关闭自动提交   插入修改,只有commit 才最终存入 2) start transaction   commit/rollback 3) show var ...

  5. 查看Chrome密码只需一段代码

    在Chrome浏览器的地址栏里输入“ chrome://chrome/settings/passwords ”,然后Chrome自动帮你保存的密码就会瞬间被曝露出来. 强调一下,只要不是在本机上输入以 ...

  6. SHELL脚本学习-自动生成AWR报告

    自动生成AWR报告,每个小时生成一次. #编辑脚本:vim awr_auto.sh #oracle用户下执行 #!/bin/bash # 每个小时执行一次,自动生成AWR报告 source ~/.ba ...

  7. Retrieving archetypes

    报错:Retrieving archetypes:' has encountered a problemAn internal error occurred during:"Retrievi ...

  8. CENTOS7上安装MYSQL5.7.21流程

    1系统约定安装文件下载目录:/data/softwareMysql目录安装位置:/usr/local/mysql数据库保存位置:/data/mysql日志保存位置:/data/log/mysql 2下 ...

  9. 在centos7上配置jenkins

    在Linux(centos7)环境下配置jenkins,并用github作为仓库. 配置jenkins https://blog.csdn.net/wangfei0904306/article/det ...

  10. 解决vs验证控件报错” WebForms UnobtrusiveValidationMode 需要“jquery”ScriptResourceMapping。请添加一个名为 jquery (区分大小写)的 ScriptResourceMapping”问题

    将RequiredFieldValidator的 EnableClientScript属性设置成 False 适用于大多验证控件