Use the useState() hook to create a stateful value that indicates if the image has been loaded. Use the useEffect() hook to check if the HTMLImageElement.prototype contains 'loading', effectively checking if lazy loading is supported natively. If not, create a new IntersectionObserver and use IntersectionObserver.observer() to observer the element. Use the return value of the hook to clean up when the component unmounts. Use the useCallback() hook to memoize a callback function for the IntersectionObserver. This callback will update the isLoaded state variable and use IntersectionObserver.disconnect() to disconnect the IntersectionObserver instance. Use the useRef() hook to create two refs. One will hold the element and the other the IntersectionObserver instance, if necessary. Finally, render the element with the given attributes. Apply loading='lazy' to make it load lazily, if necessary. Use isLoaded to determine the value of the src attribute.
-
Notifications
You must be signed in to change notification settings - Fork 0
aozoragh/react-lazy-loading
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Folders and files
Name | Name | Last commit message | Last commit date | |
---|---|---|---|---|
Repository files navigation
About
Renders an image that supports lazy loading.
Topics
Resources
Stars
Watchers
Forks
Releases
No releases published
Packages 0
No packages published