概述

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. django添加控件

    function bindRemoveCls() { $('#removeCls').click(function () { var options = $('#sel')[0].selectedOp ...

  2. MySQL 聚合函数 控制流程函数

    常用的聚合函数 1. AVG() 求平均值 mysql> AVG([DISTINCT] expr) -- 返回 expr 的平均值 mysql> select AVG(age) from ...

  3. SpringBoot放置在static下面的静态页面无法访问

    最近写项目本来写的好好的,突然static的静态页面访问不了了. 于是我各种上网查资料,看大佬的解决方案,还是没有解决. 直到发现了这篇文章 https://blog.csdn.net/cmqwan/ ...

  4. axios封装get方法和post方法

    我们常用的ajax请求方法有get.post.put等方法,相信小伙伴都不会陌生.axios对应的也有很多类似的方法,不清楚的可以看下文档.但是为了简化我们的代码,我们还是要对其进行一个简单的封装.下 ...

  5. ajax 与jsp servlet

    jQuery的Ajax实现异步传输List.Map_GOOD 分类: JAVA WEB前端2013-08-29 18:35 6296人阅读 评论(0) 收藏 举报 javajquerylistjson ...

  6. 关于Asp.net事件，如何在触发子控件的事件时，同步触发父页面的事件

    对页面引用自定义控件后,通过绑定自定义事件,页面绑定子控件的事件,在子控件做了某些修改动作后,如何同步操作父页面的方法:下面我煮了个栗子,同学们可以来尝一尝试一试 a.aspx 引用 UserCont ...

  7. Codeforces Round #485 (Div. 2) F. AND Graph

    Codeforces Round #485 (Div. 2) F. AND Graph 题目连接: http://codeforces.com/contest/987/problem/F Descri ...

  8. .NET CORE迁移踩坑

    https://www.cnblogs.com/leolaw/p/10740678.html

  9. python按照指定字符或者长度 截取字符串

    1.截取指定位置字符串 Python字符串可以理解为一个数组,获取某一部分的可以使用 str[beginIndex:endPosition],其中str为需要截取的字符串,beginIndex为需要截 ...

  10. android-基础编程-ViewPager

    ViewPager android 提供的基础V4包,android studio 导入gradle compile 'com.android.support:support-v4:25.0.0' 1 ...