本文介绍: 元素rel 属性属性preload能够让HTML页面元素内部书写一些声明式的资源获取请求,使得资源可以更早的得到加载。在这里,我

<link>元素rel 属性属性preload能够让HTML页面中 <head>元素内部书写一些声明式的资源获取请求,使得资源可以更早的得到加载

<link rel="stylesheet" href="style2.css">

&lt;script src="main2.js"&gt;</script&gt;

<link rel="preload" href="style1.css" as="style"&gt;

<link rel="preload" href="main1.js" as="script">

这里我们会先加载style1.cssmain1.js文件(但不会生效),在随后的页面渲染中,一旦需要使用它们,它们就会立即可用。


许多不同类型内容都可以被预加载,一些主要可用的as 属性值列举如下

<link>元素一个很棒的特性是它们能够接受一个media作为属性值,这将令你能够使用响应式的预加载

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

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

通过添加crossorigin="anonymous"支持跨域,对于字体文件是个特例,无论何时,字体文件都需要添加该属性

<link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注