Skip to content

Commit 1a0eb8d

Browse files
committed
Add capability to set threshold.
This commit adds new functionality to postpone. You can now set the threshold, the distance before an edge at which an element should be considered to be at the edge and loaded. The threshold can be specified in either `vh` or `px` units.
1 parent 3445946 commit 1a0eb8d

File tree

8 files changed

+463
-43
lines changed

8 files changed

+463
-43
lines changed

Readme.md

+25
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,28 @@ var Postpone = require( "postpone" );
3030
postpone = new Postpone(); // Creates a new instance and starts watching the document.
3131
````
3232

33+
By default, postpone will load an element's resource when that element scrolls into the viewport, however, you may want postpone to start loading your resources a bit before they scroll into view to ensure that they are available by the time they are on screen. Postpone lets you do this easily by passing a parameter to the constructor. If you feed postpone a number, postpone will assume you are using `vh` units, however you can also feed it a string with explicit units, such as `"150px"` or `"30vh"`. Currently, only `vh` and `px` units are supported.
34+
35+
````js
36+
var Postpone = require( "postpone" );
37+
38+
postpone = new Postpone( 50 ); // Postpone will set the threshold to 50vh, or half a viewport.
39+
````
40+
41+
Optionally, you can manually change the threshold at any point in your code by calling the `.setThreshold()` method.
42+
43+
````js
44+
var Postpone = require( "postpone" );
45+
46+
postpone = new Postpone() // Threshold defaults to 0vh
47+
48+
... // Do something with our code.
49+
50+
postpone.setThreshold( "200px" ).postpone() // Change the threshold to 200px.
51+
````
52+
53+
*Note:* we chain the `postpone()` method after changing the threshold to make sure postpone reexamines the postponed elements in the document and check if any of them should be loaded.
54+
3355
The postpone polyfill works with audio, embed, iframe, img, image, picture, use, video, and tref elements. *Note:* although the specification for `picture` is still evolving, postpone has basic support for it and is fully compatible with the [pictureTime polyfill](https://github.com/chuckcarpenter/picturetime).
3456

3557
Postpone works by modyfing the `src` and `xlink:href` attributes of elements and their descendant `source` elements when they become visible.
@@ -58,6 +80,9 @@ postpone = new Postpone(); // Creates a new instance and starts watching the doc
5880
### .load(element)
5981
Stop postponing the download of your `element` by manually telling postpone to load it.
6082

83+
### .setThreshold([threshold])
84+
Set postpone's threshold, the distance away from an edge of the viewport at which an element should be considered to be at the edge and thus loaded. `setThreshold()` accepts one optional argument and can be called at any point. The argument can be a string representing a distance in either `vh` or `px` units, a number, in which case the threshold will be interpretted as having `vh` units, or empty, effectively setting the threshold to 0.
85+
6186
## License
6287

6388
MIT

bower.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "postpone",
33
"main": "index.js",
4-
"version": "0.2.1",
4+
"version": "0.3.0",
55
"homepage": "https://github.com/lsvx/postpone",
66
"authors": [
77
"Lucas Serven <lserven@gmail.com>"

component.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "postpone",
33
"repo": "lsvx/postpone",
44
"description": "A polyfill for postponing the loading of media.",
5-
"version": "0.2.1",
5+
"version": "0.3.0",
66
"keywords": ["postpone", "media", "resource", "priority", "download"],
77
"dependencies": {},
88
"development": {},

0 commit comments

Comments
 (0)