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
+
+
+
+
+
+
+
+
+
+
+
+
+