浏览器在空闲时预加载可见区域的超链接，以加

浏览器在空闲时预加载可见区域的超链接，以加速后续页面的速度

使用 npm:

npm install prefetch-page --save

使用 CDN:

<script src="https://cdn.jsdelivr.net/npm/prefetch-page"></script> 使用方法

在浏览器中使用

<script src="https://cdn.jsdelivr.net/npm/prefetch-page"></script> <script> // 页面 dom 加载完成时触发 addEventListener('DOMContentLoaded', function () { prefetch({ threshold: 25, delay: 3000, limit: 10 }) }) // 或者在浏览器空闲时执行 requestIdleCallback(function () { prefetch({ threshold: 25, delay: 3000, limit: 10 }) }) </script>

ESModule 模块

import prefetch from 'prefetch-page' // 页面 dom 加载完成时触发 addEventListener('DOMContentLoaded', function () { prefetch({ threshold: 25, delay: 3000, limit: 10 }) }) // 或者在浏览器空闲时执行 requestIdleCallback(function () { prefetch({ threshold: 25, delay: 3000, limit: 10 }) })

CommonJS 模块

const prefetch = require('prefetch-page') // 页面 dom 加载完成时触发 addEventListener('DOMContentLoaded', function () { prefetch({ threshold: 25, delay: 3000, limit: 10 }) }) // 或者在浏览器空闲时执行 requestIdleCallback(function () { prefetch({ threshold: 25, delay: 3000, limit: 10 }) }) 选项 API prefetch(options)

返回类型: Function

返回一个函数，执行这个函数会停止观察所有未预加载的<a>标签超链接

<script src="https://cdn.jsdelivr.net/npm/prefetch-page"></script> <script> addEventListener('DOMContentLoaded', function () { const clear = prefetch() clear() }) </script> options.el

类型: String|Element

默认值: document

监听指定 DOM 元素下的超链接

<div id="box"> <a href="test1.html">test page 1</a> <a href="test2.html">test page 2</a> <a href="test3.html">test page 3</a> </div> <a href="test4.html">test page 4</a> <script src="https://cdn.jsdelivr.net/npm/prefetch-page"></script> <script> addEventListener('DOMContentLoaded', function () { // 只会对 test1.html test2.html test3.html 的超链接进行监听预加载 prefetch({ el: '#box' }) // or prefetch({ el: document.getElementById('box') }) }) </script> options.origins

类型: Array

默认值: [location.hostname]

只对指定的 origin 进行预加载，星号(*)允许所有源预加载

<a href="https://example.com/test1.html">test page 1</a> <a href="https://www.example.com/test2.html">test page 2</a> <a href="https://blog.example.com/test3.html">test page 3</a> <script src="https://cdn.jsdelivr.net/npm/prefetch-page"></script> <script> addEventListener('DOMContentLoaded', function () { // 只会对 test1.html test3.html 的超链接进行监听预加载 prefetch({ origins: ['example.com', 'blog.example.com'] }) // 允许所有源 prefetch({ origins: '*' }) }) </script> options.limit

类型: Number

默认值: Infinity

限制预加载总数

<a href="test1.html">test page 1</a> <a href="test2.html">test page 2</a> <a href="test3.html">test page 3</a> <script src="https://cdn.jsdelivr.net/npm/prefetch-page"></script> <script> addEventListener('DOMContentLoaded', function () { // 假设 test1.html 在浏览器窗口可视区域，并且已经预加载 // 如果再次滚动浏览器窗口可视区域到 test2.html 显示区域时，则不再预加载任何超链接，已超出限制 prefetch({ limit: 1 }) }) </script> options.threshold

类型: Number

默认值: 0

当目标超链接出现在浏览器可视区域大于等于 25% 时触发预加载

类型: Number

默认值: 0

当目标超链接出现在浏览器可视区域时延迟 3 秒触发预加载

如果未到 3 秒，假设在延迟到 2 秒的时候滚动到其它位置，导致目标超链接不再可视范围时，则终止触发预加载函数

如果目标元素再次出现唉可视区域，则重新延迟 3 秒

类型: Array

默认值: undefined

自定义预加载资源，可以是 img、mp3、mp4、json 任何资源

<script src="https://cdn.jsdelivr.net/npm/prefetch-page"></script> <script> addEventListener('DOMContentLoaded', function () { prefetch({ customs: ['markdown.js', '404.html', 'https://www.example.com'] }) }) </script>