You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+53-67Lines changed: 53 additions & 67 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -12,21 +12,21 @@ Because embedded content takes time to load.
12
12
-**Google maps** – 52 requests ≈ 580kb
13
13
-**Vimeo** – 8 requests ≈ 145kb
14
14
15
-
Lazyframe creates a responsive placeholder for embedded content and requests it when the user interacts with it. This decreases the page load and idle time.
15
+
Lazyframe creates a responsive placeholder for embedded content and requests it only when the user interacts with it. This decreases page load and idle time.
16
16
17
17
Lazyframe comes with brand-like themes for Youtube and Vimeo.
18
18
19
19
1.[Install](#install)
20
20
2.[Import](#import)
21
-
3.[Initialize](#Initialize)
21
+
3.[Initialize](#initialize)
22
22
4.[Options](#options)
23
23
24
24
### Install
25
25
26
26
NPM
27
27
28
28
```bash
29
-
$ npm install lazyframe --save
29
+
$ npm install @justia/lazyframe --save
30
30
```
31
31
32
32
Bower
@@ -40,7 +40,7 @@ $ bower install lazyframe
40
40
JavaScript ES6 imports
41
41
42
42
```js
43
-
importlazyframefrom"lazyframe";
43
+
importlazyframefrom"@justia/lazyframe";
44
44
```
45
45
46
46
Include JavaScript in html
@@ -51,7 +51,7 @@ Include JavaScript in html
51
51
52
52
Sass import
53
53
54
-
```sass
54
+
```scss
55
55
@import'src/scss/lazyframe'
56
56
```
57
57
@@ -63,30 +63,36 @@ Include css in html
63
63
64
64
### Initialize
65
65
66
+
The `lazyframe` functionacceptsaCSSselector, asingleDOMelement, oracollectionofelements (likea `NodeList` orjQueryobject).
67
+
66
68
```js
67
-
// Passing a selector
69
+
// Passing a selector string
68
70
lazyframe(".lazyframe");
69
71
70
-
// Passing a nodelist
71
-
let elements =document.querySelectorAll(".lazyframe");
72
+
// Passing a NodeList
73
+
const elements = document.querySelectorAll(".lazyframe");
72
74
lazyframe(elements);
73
75
74
-
// Passing a jQuery object
75
-
let elements=$(".lazyframe");
76
-
lazyframe(elements);
76
+
// Passing a single element
77
+
const element = document.querySelector(".lazyframe");
78
+
lazyframe(element);
77
79
```
78
80
79
81
## Options
80
82
81
-
You can pass general options to lazyframe on initialization. Element-specific options (most options) are set on data attributes on the element itself.
83
+
Configuration can be applied globally during initialization or on a per-element basis using `data-*` attributes. Element-specific attributes will always override global options.
84
+
85
+
### General Options
82
86
83
-
General options and corresponding defaults
87
+
These options are passed as an object during initialization and apply to all instances unless overridden by a `data-*` attribute.
84
88
85
89
```js
86
90
lazyframe(elements, {
87
-
debounce:250,
88
91
lazyload:true,
89
92
autoplay:true,
93
+
initinview:false,
94
+
showPlayButton:true,
95
+
loadThumbnail:true,
90
96
91
97
// Callbacks
92
98
onLoad: (lazyframe) =>console.log(lazyframe),
@@ -95,69 +101,49 @@ lazyframe(elements, {
95
101
});
96
102
```
97
103
98
-
### `debounce`
99
-
100
-
Value (in milliseconds) for when the update function should run after the user has scrolled. [More here](https://css-tricks.com/the-difference-between-throttling-and-debouncing/)
101
-
102
-
### `lazyload`
103
-
104
-
Set this to `false` if you want all API calls and local images to be loaded on page load (instead of when the element is in view).
105
-
106
-
### `autoplay`
107
-
108
-
Set this to `false` to remove autoplay from the `allow` attribute on the iframe tag i.e if set this to `false` if you want don't want your Youtube video to automatically start playing once the user clicks on the play icon.
109
-
110
-
### `onLoad`
111
-
112
-
Callback function for when a element is initialized.
113
-
114
-
### `onAppend`
115
-
116
-
Callback function for when the iframe is appended to DOM.
104
+
| Option | Type | Default | Description |
105
+
| :--- | :--- | :--- | :--- |
106
+
|`lazyload`|`(boolean)`|`true`| If `true`, uses `IntersectionObserver` to initialize only when the element is in the viewport. If `false`, initializes all elements on page load. |
107
+
|`autoplay`|`(boolean)`|`true`| If `true`, the embedded content will attempt to play automatically after the user clicks the placeholder. Sets `autoplay=1` in the iframe `src` and adds `autoplay` to the `allow` attribute. |
108
+
|`initinview`|`(boolean)`|`false`| If `true`, the iframe is immediately initialized (as if clicked) when the element enters the viewport. Requires `lazyload: true`. |
109
+
|`showPlayButton`|`(boolean)`|`true`| If `false`, the play button graphic will not be added to the placeholder. |
110
+
|`loadThumbnail`|`(boolean)`|`true`| If `false`, the fetched thumbnail image will not be applied as a background to the placeholder. |
111
+
|`onLoad`|`(function)`|``| Callback function fired when an element is initialized (i.e., enters the viewport or on page load if `lazyload` is `false`). Receives the lazyframe instance object. |
112
+
|`onAppend`|`(function)`|``| Callback function fired after the `iframe` is appended to the DOM upon user interaction. Receives the `iframe` element. |
113
+
|`onThumbnailLoad`|`(function)`|``| Callback function fired after a thumbnail URL is successfully fetched from the `noembed.com` API. Receives the image URL string. |
117
114
118
-
### `onThumbnailLoad`
115
+
### Element-Specific Options (Data Attributes)
119
116
120
-
Callback function with the thumbnail URL
121
-
122
-
## Element-specific options
117
+
These options are set as `data-*` attributes directly on the HTML element.
0 commit comments