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
+29-29Lines changed: 29 additions & 29 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -8,13 +8,13 @@ Dependency-free library for lazyloading iframes. [Demo](https://vb.github.io/laz
8
8
9
9
Because embedded content takes time to load.
10
10
11
-
***Youtube** – 11 requests ≈ 580kb
12
-
***Google maps** – 52 requests ≈ 580kb
13
-
***Vimeo** – 8 requests ≈ 145kb
11
+
-**Youtube** – 11 requests ≈ 580kb
12
+
-**Google maps** – 52 requests ≈ 580kb
13
+
-**Vimeo** – 8 requests ≈ 145kb
14
14
15
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.
16
16
17
-
Lazyframe comes with brand-like themes for Youtube, Vimeo and Vine.
17
+
Lazyframe comes with brand-like themes for Youtubeand Vimeo.
18
18
19
19
1.[Install](#install)
20
20
2.[Import](#import)
@@ -40,7 +40,7 @@ $ bower install lazyframe
40
40
JavaScript ES6 imports
41
41
42
42
```js
43
-
importlazyframefrom'lazyframe';
43
+
importlazyframefrom"lazyframe";
44
44
```
45
45
46
46
Include JavaScript in html
@@ -58,21 +58,21 @@ Sass import
58
58
Include css in html
59
59
60
60
```html
61
-
<linkrel="stylesheet"href="dist/lazyframe.css">
61
+
<linkrel="stylesheet"href="dist/lazyframe.css" />
62
62
```
63
63
64
64
### Initialize
65
65
66
66
```js
67
67
// Passing a selector
68
-
lazyframe('.lazyframe');
68
+
lazyframe(".lazyframe");
69
69
70
70
// Passing a nodelist
71
-
let elements =document.querySelectorAll('.lazyframe');
71
+
let elements =document.querySelectorAll(".lazyframe");
72
72
lazyframe(elements);
73
73
74
74
// Passing a jQuery object
75
-
let elements =$('.lazyframe');
75
+
let elements =$(".lazyframe");
76
76
lazyframe(elements);
77
77
```
78
78
@@ -84,16 +84,16 @@ General options and corresponding defaults
84
84
85
85
```js
86
86
lazyframe(elements, {
87
-
apikey:undefined,
88
-
debounce:250,
89
-
lazyload:true,
90
-
autoplay:true,
91
-
92
-
// Callbacks
93
-
onLoad: (lazyframe) =>console.log(lazyframe),
94
-
onAppend: (iframe) =>console.log(iframe),
95
-
onThumbnailLoad: (img) =>console.log(img)
96
-
})
87
+
apikey:undefined,
88
+
debounce:250,
89
+
lazyload:true,
90
+
autoplay:true,
91
+
92
+
// Callbacks
93
+
onLoad: (lazyframe) =>console.log(lazyframe),
94
+
onAppend: (iframe) =>console.log(iframe),
95
+
onThumbnailLoad: (img) =>console.log(img),
96
+
});
97
97
```
98
98
99
99
### `apikey`
@@ -130,20 +130,20 @@ Callback function with the thumbnail URL
130
130
131
131
```html
132
132
<div
133
-
class="lazyframe"
134
-
data-vendor=""
135
-
data-title=""
136
-
data-thumbnail=""
137
-
data-src=""
138
-
data-ratio="1:1"
139
-
data-initinview="false"
140
-
data-autoplay="false">
141
-
</div>
133
+
class="lazyframe"
134
+
data-vendor=""
135
+
data-title=""
136
+
data-thumbnail=""
137
+
data-src=""
138
+
data-ratio="1:1"
139
+
data-initinview="false"
140
+
data-autoplay="false"
141
+
></div>
142
142
```
143
143
144
144
### `data-vendor`
145
145
146
-
Attribute for theming lazyframe. Currently supported values are `youtube`, `youtube_nocookie`, `vimeo`and `vine`.
146
+
Attribute for theming lazyframe. Currently supported values are `youtube`, `youtube_nocookie`and `vimeo`.
0 commit comments