instant.page(页面预加载)的进阶用法

在以前的文章中我提到过 instant.page 最简单用法,即直接导入 js 文件实现的桌面端鼠标移动到链接上 65ms 后就开始加载,移动端当用户手指放在链接上就开始加载网页。

这篇文章会交给你一些 instant.page 的进阶用法。

官方国外高速引入代码

PHP

<script src="//instant.page/5.2.0" type="module" integrity="sha384-jnZyxPjiipYXnSU0ygqeac2q7CVYMbh84q0uHVRRxEtvFPiQYbXWUorga2aqZJ0z"></script>

上面这是由官方部署的 CDN,可以直接引用,国内的速度不佳,也可以使用由我运营的 我自建的(黎洛免费API拥有全球高速节点)以上代码改为下面的即可

全球高速引用代码

PHP

<script src="https://api.wvn.cn/s/cdnjs/instant.page/5.2.0.js" type="module" integrity="sha384-jnZyxPjiipYXnSU0ygqeac2q7CVYMbh84q0uHVRRxEtvFPiQYbXWUorga2aqZJ0z"></script>

2、修改预加载的时间

默认情况加,instant.page 会在电脑端用户鼠标移动到链接上 65ms 后开始预加载网页,但是实际上这个数字我们是可以修改的。

我们只需要在 <body> 标签中加入一个属性 data-instant-intensity=”150″ 这个属性中的 150 就是你想要设置的预加载时间,上述标签的意思就是当鼠标移动到链接上 150ms 后开始预加载页面,当然这个 150 可以随意修改。PHP

<body data-instant-intensity="150"> </body>

3、仅在按下鼠标后预加载网页内容

另一种方式则是让鼠标移动到链接上以后不预加载链接,仅在按下鼠标后才开始加载。

在 <body> 标签中加入一个属性 data-instant-intensity=”mousedown”PHP

<body data-instant-intensity="mousedown"> </body>

如果你不想让这个属性影响到移动端用户,可以使用 data-instant-intensity=”mousedown-only”

4、加载页面内所有可见链接

温馨提示

注意,此属性我仅推荐用于小型博客。

这是一个针对移动设备的设定,仅可在移动端上使用,这个属性可以大幅度提升移动端的加载速度,但是会给服务器带来更多负载。

在 <body> 标签中加入一个属性 data-instant-intensity=”viewport” 它会加载所有网页中可见的链接。

在 <body> 标签中加入一个属性 data-instant-intensity=”viewport-all” 它会加载所有网页中的链接。PHP

<body data-instant-intensity="viewport"> </body>

5、提高点击触发速度

此设定在 5.0 脚本中默认开启,可以添加属性 data-instant-no-mousedown-shortcut 来禁用。

此设定不是用于预加载的,而是让用户在鼠标点击下去后,还没有升起时就触发点击在 <body> 标签中加入一个属性 data-instant-mousedown-shortcut 请注意,这个属性可能会与其他 js 脚本冲突。PHP

<body data-instant-mousedown-shortcut> </body>

6、其他的细节

温馨提示

脚本仅会加载本域名的链接脚本仅加载主文档,不会加载其他的资源文件(如图片,视频,JS 等)。

© 版权声明
THE END
喜欢就支持一下吧!
点赞217赞赏 分享