使用<link />标签进行图像预取

时间:2015-08-14 15:00:52

标签: html html5

我见过使用标签加载图片的网站,例如;

<link href='images.jpg' rel='somthing' type='something'>

设计网站时有什么相关性? 网站的哪些方面有助于优化(我认为它用于优化。如果我错了就对我说)。有人可以向我解释一下吗?

2 个答案:

答案 0 :(得分:7)

有些人将此用于图像/ css / page预取。你可以read about it here.

基本上,一旦页面完成加载,浏览器就会看到这些link标签,如果rel属性是&#34;则接下来&#34;或&#34;预取&#34;然后浏览器将开始下载href属性指向的任何内容并将其存储在缓存中,以便在用户点击它时加载速度非常快。

此方法可用于预取任何内容,包括图像,样式表,不同的网页等。只要<link>中使用的网址与用于正常加载资源的网址匹配,它就会加载来自缓存的资源。

例如,如果您的网页有<a href="page2.html">Page 2</a>这个链接并且您想预取它,则可以将其添加到您的网页<link rel="next" href="page2.html">

最后,这种预取方法比javascript方法更受欢迎,因为这种类型的预取符合标准,由浏览器处理,如果用户有计量带宽或其他连接限制,则可以禁用。

答案 1 :(得分:5)

当页面加载时,阻塞脚本可能会中断,从而迫使其他脚本等待。链接元素中的rel=preload变为声明性提取原语,它启动早期提取并将提取与资源执行分开。

<link rel="preload" href="/style/other.css" as="style">

<link rel="preload" href="/assets/font.woff2" as="font">

<link rel="preload" href="/img/header.png" as="image">

REF。 https://w3c.github.io/preload/

请注意preload是初步