@charlietango/use-native-lazy-loading
v1.10.0
Published
Detect if the browser supports the new 'loading' attribute on Image elements.
Downloads
10,466
Readme
useNativeLazyLoading
Detect if the browser supports the new loading
attribute on Image elements.
Combine this with react-intersection-observer
to lazy load images with a fallback method.
Checkout the Storybook demo.
Installation
yarn add @charlietango/use-native-lazy-loading
API
const supported = useNativeLazyLoading(initialSupported)
Example
Example of how to combine this with react-intersction-observer
, to create a lazy loaded image.
import React from 'react'
import useNativeLazyLoading from '@charlietango/use-native-lazy-loading'
import { useInView } from 'react-intersection-observer'
const LazyImage = ({ width, height, src, ...rest }) => {
const supportsLazyLoading = useNativeLazyLoading()
const [ref, inView] = useInView({
triggerOnce: true,
skip: supportsLazyLoading !== false,
})
return (
<div
ref={ref}
style={{
position: 'relative',
paddingBottom: `${(height / width) * 100}%`,
background: '#2a4b7a',
}}
>
{inView || supportsLazyLoading ? (
<img
{...rest}
src={src}
alt="Placeholder kitten"
loading="lazy"
style={{ position: 'absolute', width: '100%', height: '100%' }}
/>
) : null}
</div>
)
}
export default LazyImage