在以前的文章中我提到过instant.page最简单用法,即直接导入js文件实现的桌面端鼠标移动到链接上 65ms
后就开始加载,移动端当用户手指放在链接上就开始加载网页。
这篇文章会交给你一些 instant.page
的进阶用法。
1、国际惯例,导入JS文件
官方CDN
<script src="//instant.page/5.2.0" type="module" integrity="sha384-jnZyxPjiipYXnSU0ygqeac2q7CVYMbh84q0uHVRRxEtvFPiQYbXWUorga2aqZJ0z"></script>
这是由官方部署的CDN,可以直接引用,国内的速度不佳,也可以使用由我运营的CDN(不保证稳定性)
我自建的
<script src="https://cdn.lo-li.icu/instant.page/5.1.1" type="module" integrity="sha384-MWfCL6g1OTGsbSwfuMHc8+8J2u71/LA8dzlIN3ycajckxuZZmF+DNjdm7O6H3PSq"></script>
你需要做的是将上方的任意一个js文件放在 </body>
上方。
2、修改预加载的时间
默认情况加,instant.page
会在电脑端用户鼠标移动到链接上 65ms
后开始预加载网页,但是实际上这个数字我们是可以修改的。
我们只需要在 <body>
标签中加入一个属性 data-instant-intensity="150"
这个属性中的 150 就是你想要设置的预加载时间,上述标签的意思就是当鼠标移动到链接上 150ms
后开始预加载页面,当然这个 150
可以随意修改。
<body data-instant-intensity="150">
</body>
3、仅在按下鼠标后预加载网页内容
另一种方式则是让鼠标移动到链接上以后不预加载链接,仅在按下鼠标后才开始加载。
在 <body>
标签中加入一个属性 data-instant-intensity="mousedown"
<body data-instant-intensity="mousedown">
</body>
如果你不想让这个属性影响到移动端用户,可以使用 data-instant-intensity="mousedown-only"
4、加载页面内所有可见链接
注意,此属性我仅推荐用于小型博客。
这是一个针对移动设备的设定,仅可在移动端上使用,这个属性可以大幅度提升移动端的加载速度,但是会给服务器带来更多负载。
在 <body>
标签中加入一个属性 data-instant-intensity="viewport"
它会加载所有网页中可见的链接。
在 <body>
标签中加入一个属性 data-instant-intensity="viewport-all"
它会加载所有网页中的链接。
<body data-instant-intensity="viewport">
</body>
5、提高点击触发速度
此设定在5.0脚本中默认开启,可以添加属性
data-instant-no-mousedown-shortcut
来禁用。
此设定不是用于预加载的,而是让用户在鼠标点击下去后,还没有升起时就触发点击
在 <body>
标签中加入一个属性 data-instant-mousedown-shortcut
请注意,这个属性可能会与其他js脚本冲突。
<body data-instant-mousedown-shortcut>
</body>
6、其他的细节
脚本仅会加载本域名的链接。
脚本仅加载主文档,不会加载其他的资源文件(如图片,视频,JS等)。
你可以通过本文的附件自行进行部署。
附件:5.2.0.js
已经用上,感觉还不错