Package Exports

prefetch-page
prefetch-page/dist/prefetch-page.cjs.js
prefetch-page/dist/prefetch-page.esm.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (prefetch-page) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

语言: 中文 English

Prefetch-Page

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

安装

使用 npm:

注意如果你使用的是 ESModule 或 CommonJS 导入则不内置 addEventListener('load', function(){})


```bash
npm install prefetch-page --save

使用 CDN:

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

使用方法

可以在<script>标签上设置选项值

<script src="https://cdn.jsdelivr.net/npm/prefetch-page" threshold="25" delay="3000" limit="10"></script>

ESModule 模块

import prefetch from 'prefetch-page'

addEventListener('load', function () {
  prefetch({ threshold: 25, delay: 3000, limit: 10 })
})

CommonJS 模块

const prefetch = require('prefetch-page')

addEventListener('load', function () {
  prefetch({ threshold: 25, delay: 3000, limit: 10 })
})

API

options.el

类型: String

默认值: 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>
<!-- 只会对 test1.html test2.html test3.html 的超链接进行监听预加载 -->
<script src="https://cdn.jsdelivr.net/npm/prefetch-page" el="#box"></script>

options.origins

类型: String

默认值: undefined

只对指定的 origins 进行预加载 (使用逗号分隔，逗号后面不要出现空格)

<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>
<!-- 只会对 test1.html test3.html 的超链接进行监听预加载 -->
<script src="https://cdn.jsdelivr.net/npm/prefetch-page" origins="example.com,blog.example.com"></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>
<!-- 假设 test1.html 在浏览器窗口可视区域，并且已经预加载 -->
<!-- 如果再次滚动浏览器窗口可视区域到 test2.html 显示区域时，则不再预加载任何超链接，已超出限制 -->
<script src="https://cdn.jsdelivr.net/npm/prefetch-page" limit="1"></script>

options.threshold

类型: Number

默认值: 0

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

<script src="https://cdn.jsdelivr.net/npm/prefetch-page" threshold="25"></script>

options.delay

类型: Number

默认值: 0

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

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

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

<script src="https://cdn.jsdelivr.net/npm/prefetch-page" threshold="3000"></script>

options.customs

类型: String

默认值: undefined

自定义预加载资源，可以是 img、mp3、mp4、json 任何资源 (使用逗号分隔，逗号后面不要出现空格)

<script
  src="https://cdn.jsdelivr.net/npm/prefetch-page"
  customs="'markdown.js,404.html,https://www.example.com'"
></script>