From d3746e14859ddc7415b8d1103045f77a6db86f0a Mon Sep 17 00:00:00 2001 From: Andrea Verlicchi Date: Fri, 18 Jun 2021 17:40:33 +0200 Subject: [PATCH] Added `threshold` option to allow users select the % of link areas that entered the viewport before prefetching (#214) --- README.md | 6 +++++ src/index.mjs | 4 +++ test/quicklink.spec.js | 24 +++++++++++++++++- test/test-threshold.html | 53 ++++++++++++++++++++++++++++++++++++++++ 4 files changed, 86 insertions(+), 1 deletion(-) create mode 100644 test/test-threshold.html diff --git a/README.md b/README.md index df22dd19..df9ed95a 100644 --- a/README.md +++ b/README.md @@ -131,6 +131,12 @@ Default: `Infinity` The _total_ requests that can be prefetched while observing the `options.el` container. +#### options.threshold +Type: `Number`
+Default: `0` + +The _area percentage_ of each link that must have entered the viewport to be fetched, in its decimal form (e.g. 0.25 = 25%). + #### options.throttle Type: `Number`
Default: `Infinity` diff --git a/src/index.mjs b/src/index.mjs index 6d5ed025..e739dd10 100644 --- a/src/index.mjs +++ b/src/index.mjs @@ -49,6 +49,7 @@ function isIgnored(node, filter) { * @param {Array|RegExp|Function} [options.ignores] - Custom filter(s) that run after origin checks * @param {Number} [options.timeout] - Timeout after which prefetching will occur * @param {Number} [options.throttle] - The concurrency limit for prefetching + * @param {Number} [options.threshold] - The area percentage of each link that must have entered the viewport to be fetched * @param {Number} [options.limit] - The total number of prefetches to allow * @param {Number} [options.delay] - Time each link needs to stay inside viewport before prefetching (milliseconds) * @param {Function} [options.timeoutFn] - Custom timeout function @@ -63,6 +64,7 @@ export function listen(options) { const [toAdd, isDone] = throttle(options.throttle || 1/0); const limit = options.limit || 1/0; + const threshold = options.threshold || 0; const allowed = options.origins || [location.hostname]; const ignores = options.ignores || []; @@ -113,6 +115,8 @@ export function listen(options) { } } }); + }, { + threshold }); timeoutFn(() => { diff --git a/test/quicklink.spec.js b/test/quicklink.spec.js index 13ed2fa0..96fbcdac 100644 --- a/test/quicklink.spec.js +++ b/test/quicklink.spec.js @@ -274,7 +274,7 @@ describe('quicklink tests', function () { expect(ours).to.include(`https://example.com/?url=${server}/3.html`); expect(ours).to.include(`https://example.com/?url=${server}/4.html`); }); - + it('should delay prefetch for in-viewport links correctly (UMD)', async function () { const responseURLs = []; page.on('response', resp => { @@ -303,4 +303,26 @@ describe('quicklink tests', function () { expect(responseURLs).to.include(`${server}/4.html`); }); + it('should consider threshold option before prefetching (UMD)', async function () { + const responseURLs = []; + page.on('response', resp => { + responseURLs.push(resp.url()); + }); + + await page.goto(`${server}/test-threshold.html`); + await page.setViewport({ + width: 1000, + height: 800, + }); + await page.waitFor(1000); + expect(responseURLs).to.be.an('array'); + expect(responseURLs).to.include(`${server}/1.html`); + expect(responseURLs).to.include(`${server}/2.html`); + await page.evaluate(_ => { + window.scrollBy(0, window.innerHeight); + }); + await page.waitFor(400); + expect(responseURLs).to.include(`${server}/3.html`); + expect(responseURLs).to.include(`${server}/4.html`); + }); }); diff --git a/test/test-threshold.html b/test/test-threshold.html new file mode 100644 index 00000000..0278616f --- /dev/null +++ b/test/test-threshold.html @@ -0,0 +1,53 @@ + + + + + + + Prefetch: Basic Usage + + + + + + + + + + + + +