react-lazy-load-image-component icon indicating copy to clipboard operation
react-lazy-load-image-component copied to clipboard

delay not working

Open averyfreeman opened this issue 3 years ago • 0 comments

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

averyfreeman avatar Jul 24 '20 23:07 averyfreeman