概述

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. PHP整理--MySQL--DOS命令操作数据库

    一.MySQL:关系型数据库,存在表的概念. MySQL的结构:数据库可以存放很多表,每张表可以存放多个字段,每个字段可以存放多个记录. 二.Dos操作数据库 用PHPStudy终端➡其他选项菜单➡M ...

  2. PHP开发——目录

    PHP开发基础 PHP开发——环境安装 PHP开发——基础 PHP开发——变量 PHP开发——超全局数组变量 PHP开发——常量 PHP开发——数据类型 PHP开发——进制转换 PHP开发——运算符 ...

  3. 消息中间件和JMS介绍

    在一个公司创立初期,他可能只有几个应用,系统之间的关联也不是那么大,A系统调用B系统就直接调用B提供的API接口:后来这个公司做大了,他一步步发展有了几十个系统,这时候A系统要调用B系统的接口,但是B ...

  4. Linux-01初级学习

    刚刚接触 Linux学习中的一点笔记`02 ps:自己学习过程中的记录,略菜,给没学过的纯小白 配置网络 1.虚拟网卡 2.虚拟机服务  我的电脑-->管理-->服务 3.修改网络配置文件 ...

  5. 软工作业1—java实现wc.exe

    github项目地址 https://github.com/liyizhu/wc.exe WC 项目要求 基本功能列表: wc.exe -c file.c     //返回文件 file.c 的字符数 ...

  6. 512MB内存VPS服务器安装宝塔WEB客户端建站 - 环境部署篇

    原本以为我们很多网友用VPS搭建网站不会用WEB面板,而采用一键包或者自己部署编译环境,但是最后发现其实目前我们使用WEB面板的还是挺多的,无论是免费还是付费的都有不少人使用.比如当初一直免费的AMH ...

  7. 调用Excel宏批量处理文件

    '1.用户可以任意选择文件夹进行遍历 '2.限定遍历时仅搜索EXCEL文件(你可以改变文件类型) '这个程序要先在“引用”下选择"microsoft scripting runtime&qu ...

  8. java38

    字符串内存分析 String str = new String("ABCD") 会先在堆中开辟一个空间,然后去常量池(方法区)中寻找是否有该变量,如果有,直接引用常量池中的内容 如 ...

  9. Libgdx slg游戏进程记录

    2月16日缩放居中,stage确定点击坐标,背景处理为actor 2月17日地图多次点击 2月19日stage确定点击位置(贝塞尔曲线六边形) 2月24日格式长度,读取xml属性解析btl保存 3月1 ...

  10. oracle创建新用户和用户表空间

    .首先,创建(新)用户: create user username identified by password; username:新用户名的用户名 password: 新用户的密码 也可以不创建新 ...