react-lazy-load-image-component
react-lazy-load-image-component copied to clipboard
delay not working
Bug description
I'm using LazyLoadImage and I don't seem to be able to get delay to work. I'm using create-react-app w/ React 16.13.1 and I'm trying to use either _.debounce
or _.throttle
for delayMethod
, importing them like this (I have confirmed that I have both these libraries in node_modules/lodash
):
import { debounce, throttle } from 'lodash';
my LazyLoadImage
instance is invoked like this (I've tried with LazyLoadComponent
wrapped around it, and without):
</LazyLoadComponent>
<LazyLoadImage
src={'/images/wireframe.gif'}
className='img-fluid'
alt='website wireframe animation'
effect='blur'
delayMethod='debounce'
delayTime={3000}
/>
</LazyLoadComponent>
I'm loading images from /public/images/
in case that makes a difference
To Reproduce
In page component, invoke two `LazyLoadImage` instances in JSX - one immediately inside viewport, one outside viewport
Add `delayMethod={debounce}` or `delayMethod='debounce'` (tried all) with (e.g.) `delayTime={3000}` and none introduced any delay
Image in viewport loads with appropriate blur effect, but loads immediately
Image outside of viewport is already loaded when revealed by scroll
List any other actions needed to reproduce the issue:
- Scroll to second LazyLoadImage instance - image is already loaded
Expected behavior I expected the delay of 3000ms to take effect, and for the image outside of the viewport to wait to be loaded until inside the viewport
Technical details: create-react-app w/ React 16.13.1
- Package version [e.g. 1.2.0] 1.5.0
- Server Side Rendering? [Yes/No] No
- Device [Desktop/Smartphone] Desktop
- Operating System [e.g. Windows, Mac OS, GNU/Linux] Linux
- Browser [e.g. Firefox, Chrome, Safari] Chrome