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
* Add utils and delayed loading test in stories
* Intermediate solution
Not sure where the reducer/update function is headed, but we'll
find out, I suppose.
* Finish refactoring
* Make buffering work
It works, but now the intersection logic is not the same. Scrolling
until inView is true, and then up, triggers the promise cancelation.
This is undesirable. We want the image to keep loading as long as
it stays on the screen. Oddly, scrolling past the image, and it
being in view, still lets it load without canceling (as intendeed).
Another difference is that loading only commences once the image is
fully in view, rather than on the margin.
* Document things a bit better
* There was no bug; the placeholder had a 0 height!
* A few more docs
* Name things, expose as props
Added:
- debugActions: logs actions in dev, warns and logs in prod
- debounceDurationMs: whether, and how much to debounce loading,
0 by default, so no change to v1. Added codepath to make it so.
- Provisional changes.md document with API compatibility
- Various TODOs and cleanup tasks
* Fix passing of debounceDurationMs to cb
* Use debugActions in the story, destructure it
Also add a note to hopefully remember to destructure next time :)
* Pin microbundle and ts versions
* Clean dir before build
* TS BUG: need declaration: false to build correctly
If we set declaration: true, then typescript (specifically rpt2,
Rollup's TS plugin) fails with a cryptic path error. This is
filed under microsoft/TypeScript#25047.
Curiously, this does not happen on master, and I have vaguely
traced it back to unionize and the fact that it does fancy type
exports, which we partially re-export here. We would have to
manually emit a declaration file, which is not hard tbh, but a bit
annoying. Even funnier, webpack has no issue building in storybook,
but that might be because it does not emit declarations anyway.
Steps:
- Get declaration file from master, add to repository, and copy to
dist/ upon build;
- See if massaging our exports fixes it;
- Wait for TS :/
* 1.1.0-rc.1
* Version bump
* Make update static, use Commands
The Elm/JS/Redux/React-Component fusion is complete. The reducer
is now a pure function, because it only describes side-effects,
and does not execute them. The logic is really nice to read there.
* Naming things
* Version bump
* Use TS3.0
* Copy definitions separately
Because of the "path undefined" bug, we have to run `tsc`
separately, to get the definitions and copy them over.
* Do not expose Buffering as a separate state
Expose it under 'Loading' for backwards compatibility
* Improve debounceDurationMs docs
* Add first point to README
* Cancel Promises, clear cache on unmount
* Add docs for debounceDurationMs
Copy file name to clipboardExpand all lines: README.md
+35-13Lines changed: 35 additions & 13 deletions
Original file line number
Diff line number
Diff line change
@@ -30,6 +30,7 @@
30
30
- Full presentational control for the caller (render props).
31
31
- Modern, performant implementation, using [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) and providing [polyfill information](#polyfill-intersection-observer).
-[Debounce / Delay](#debounce--delay); can wait for an image to be in the viewport for a set time, before loading.
33
34
- Works with horizontal scrolling, supports background images.
34
35
-[Fallbacks for SEO / when Javascript is disabled](#fallback-without-javascript).
35
36
- Easy to understand source code. You should be able to fork and do your thing if desired.
@@ -292,6 +293,25 @@ Think about the cases where it is beneficial to do this, and apply it with inten
292
293
Examples might be eager-loading hero images, preloading the first few elements in a list and so on.
293
294
[Some of these use cases are provided as examples](#examples).
294
295
296
+
### Debounce / Delay
297
+
298
+
In cases where you have a long list of images that the user might scroll through, then loading intermediate images can waste bandwidth and processing time.
299
+
This is undesired.
300
+
The way to handle it is with a **minimum duration** that the image has to stay within the viewport, before making the request.
301
+
This is specified using the `debounceDurationMs` prop:
302
+
303
+
```jsx
304
+
<LazyImage
305
+
src="/img/porto_buildings_large.jpg"
306
+
alt="Buildings with tiled exteriors, lit by the sunset."
| **src** | String | | true | The source of the image to load |
416
-
| **alt** | String | | false | The alt text description of the image you are loading |
417
-
| **srcSet** | String | | false | If your images use srcset, you can pass the `srcSet` prop to provide that information for preloading. |
418
-
| **sizes** | String | | false | If your images use srcset, the sizes attribute helps the browser decide which source to load. |
419
-
| **actual** | Function (render callback) of type ({imageProps}) => React.ReactNode | | true | Component to display once image has loaded |
420
-
| **placeholder** | Function (render callback) of type ({imageProps, ref}) => React.ReactNode | undefined | true | Component to display while no request for the actual image has been made |
421
-
| **loading** | Function (render callback) of type () => React.ReactNode | placeholder | false | Component to display while the image is loading |
422
-
| **error** | Function (render callback) of type () => React.ReactNode | actual (broken image) | false | Component to display if the image loading has failed (render prop) |
423
-
| **loadEagerly** | Boolean | false | false | Whether to skip checking for viewport and always show the 'actual' component |
424
-
| **observerProps** | {threshold: number, rootMargin: string} | {threshold: 0.01, rootMargin: "50px0px"} | false | Subset of props for the IntersectionObserver |
425
-
| **experimentalDecode** | Boolean | false | false | Decode the image off-main-thread using the Image Decode API. Test before using! |
433
+
| Name | Type | Default | Required | Description |
| **src** | String | | true | The source of the image to load |
436
+
| **alt** | String | | false | The alt text description of the image you are loading |
437
+
| **srcSet** | String | | false | If your images use srcset, you can pass the `srcSet` prop to provide that information for preloading. |
438
+
| **sizes** | String | | false | If your images use srcset, the sizes attribute helps the browser decide which source to load. |
439
+
| **actual** | Function (render callback) of type ({imageProps}) => React.ReactNode | | true | Component to display once image has loaded |
440
+
| **placeholder** | Function (render callback) of type ({imageProps, ref}) => React.ReactNode | undefined | true | Component to display while no request for the actual image has been made |
441
+
| **loading** | Function (render callback) of type () => React.ReactNode | placeholder | false | Component to display while the image is loading |
442
+
| **error** | Function (render callback) of type () => React.ReactNode | actual (broken image) | false | Component to display if the image loading has failed (render prop) |
443
+
| **debounceDurationMs** | Number | N/A | false | The minimum duration that the image has to be in the viewport before starting to load, in ms. This can help avoid loading images while the user scrolls quickly past them. |
444
+
| **loadEagerly** | Boolean | false | false | Whether to skip checking for viewport and always show the 'actual' component |
445
+
| **observerProps** | {threshold: number, rootMargin: string} | {threshold: 0.01, rootMargin: "50px0px"} | false | Subset of props for the IntersectionObserver |
446
+
| **experimentalDecode** | Boolean | false | false | Decode the image off-main-thread using the Image Decode API. Test before using! |
426
447
427
448
**`<LazyImageFull />`** accepts the following props:
428
449
@@ -432,6 +453,7 @@ The presentation can be derived from those plus, crucially, any specific needs y
432
453
| **alt** | String | | false | The alt text description of the image you are loading |
433
454
| **srcSet** | String | | false | If your images use srcset, you can pass the `srcSet` prop to provide that information for preloading. |
434
455
| **sizes** | String | | false | If your images use srcset, the sizes attribute helps the browser decide which source to load. |
456
+
| **debounceDurationMs** | Number | N/A | false | The minimum duration that the image has to be in the viewport before starting to load, in ms. |
435
457
| **loadEagerly** | Boolean | false | false | Whether to skip checking for viewport and always show the 'actual' component |
436
458
| **observerProps** | {threshold: number, rootMargin: string} | {threshold: 0.01, rootMargin: "50px0px"} | false | Subset of props for the IntersectionObserver |
437
459
| **children** | Function of type ({imageProps, imageState, ref}) => React.ReactNode | | true | Function to call that renders based on the props and state provided to it by LazyImageFull |
0 commit comments