Package Exports

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:

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% 时触发预加载

options.delay

类型: Number

默认值: 0

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

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

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

options.customs

类型: 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>