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
Really simple component that renders children elements when they enter the viewport.
4
+
React Lazy Load is easy to use React component which helps you defer loading content in predictable way. It's fast, works in IE8+, 6KB minified and uses debounce function by default. You can also use component inside scrolling container, such as div with scrollbar. It will be found automatically. Check out an example.
This is used to set the elements height even when it contains no content.
58
+
Aliases: `threshold`
42
59
43
-
```jsx
44
-
<LazyLoad height={100}>
45
-
<div>some content</div>
46
-
</LazyLoad>
47
-
```
60
+
The `offset` option allows you to specify how far below, above, to the left, and to the right of the viewport you want to _begin_ displaying your content. If you specify `0`, your content will be displayed as soon as it is visible in the viewport, if you want to load _1000px_ below or above the viewport, use `1000`.
48
61
49
-
### threshold={Number}
62
+
#### offsetVertical
63
+
Type: `Number|String` Default: `offset`'s value
50
64
51
-
By default content is loaded when it appears on the screen. If you want content to load earlier use threshold parameter. Setting threshold to 200 causes image to load 200 pixels before it appears on viewport.
65
+
The `offsetVertical` option allows you to specify how far above and below the viewport you want to _begin_ displaying your content.
52
66
53
-
```jsx
54
-
<LazyLoad threshold={200}>
55
-
<div>some content</div>
56
-
</LazyLoad>
57
-
```
67
+
#### offsetHorizontal
68
+
Type: `Number|String` Default: `offset`'s value
58
69
59
-
### onContentVisible={Function}
70
+
The `offsetHorizontal` option allows you to specify how far to the left and right of the viewport you want to _begin_ displaying your contet.
60
71
61
-
A callback function to execute when the content appears on the screen.
72
+
#### offsetTop
73
+
Type: `Number|String` Default: `offsetVertical`'s value
The `offsetTop` option allows you to specify how far above the viewport you want to _begin_ displaying your content.
76
+
77
+
#### offsetBottom
78
+
Type: `Number|String` Default: `offsetVertical`'s value
79
+
80
+
The `offsetBottom` option allows you to specify how far below the viewport you want to _begin_ displaying your content.
81
+
82
+
#### offsetLeft
83
+
Type: `Number|String` Default: `offsetVertical`'s value
84
+
85
+
The `offsetLeft` option allows you to specify how far to left of the viewport you want to _begin_ displaying your content.
86
+
87
+
#### offsetRight
88
+
Type: `Number|String` Default: `offsetVertical`'s value
89
+
90
+
The `offsetRight` option allows you to specify how far to the right of the viewport you want to _begin_ displaying your content.
91
+
92
+
#### throttle
93
+
Type: `Number|String` Default: `250`
94
+
95
+
The throttle is managed by an internal function that prevents performance issues from continuous firing of `scroll` events. Using a throttle will set a small timeout when the user scrolls and will keep throttling until the user stops. The default is `250` milliseconds.
96
+
97
+
#### debounce
98
+
Type: `Boolean` Default: `true`
99
+
100
+
By default the throttling function is actually a [debounce](https://lodash.com/docs#debounce) function so that the checking function is only triggered after a user stops scrolling. To use traditional throttling where it will only check the loadable content every `throttle` milliseconds, set `debounce` to `false`.
101
+
102
+
### height
103
+
Type: `String|Number` Default: `100`
104
+
105
+
This is used to set the elements height even when it has no content.
106
+
107
+
### onContentVisible
108
+
Type `Function`
109
+
110
+
A callback function to execute when the content appears on the screen.
0 commit comments