概述

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. 在MyEclipse中使用spring-boot+mybatis+freemarker实现基本的增删改查

    一.基本环境 二.创建实体类 1.User.java package bjredcross.rainbowplans.model; import bjredcross.rainbowplans.com ...

  2. docker安装nginx和php

    参考文章:https://www.cnblogs.com/boundless-sky/p/7182410.html 1.下载镜像docker pull nginxdocker pull php:7.2 ...

  3. echart 图例

    说明:stack相同,两个bar合并但是不会重叠 如果需要重叠 用barGap: '-100%', 根据不同的需求来使用两者. <template> <div> echart ...

  4. Navicat Premium 出现2059错误解决办法

    1,登陆后可查询默认加密规则,键入 use mysql; select user,plugin from user where user ='root'; 解决办法: 1,更新用户密码:ALTER U ...

  5. SQL视图命名规则：一般以V_xxx_xxxxxx

  6. qq通讯录

  7. sklearn svm基本使用

    SVM基本使用 SVM在解决分类问题具有良好的效果,出名的软件包有libsvm(支持多种核函数),liblinear.此外python机器学习库scikit-learn也有svm相关算法,sklear ...

  8. golang中数组指针和指针数组的区别

    func test(){ x,y := 1, 2 var arr = [...]int{5:2} //数组指针 var pf *[6]int = &arr //指针数组 pfArr := [. ...

  9. ASP.NET获取POST提交过来的数据流，转换成Json格式的字符串

    public class Public { private static Public _instance = new Public(); /// <summary> /// 全局访问点 ...

  10. CentOS 7 用firewall-cmd来开放端口

    2.CentOS 7 用firewall-cmd来开放端口 如: firewall-cmd --permanent --add-port=3306/tcp 重新加载 firewall-cmd --re ...