aljullu / react-lazy-load-image-component Goto Github PK

react-lazy-load-image-component should use Webpack environment variables to distinguish between production and development builds.

Is your feature request related to a problem? Please describe.
I would like the component to display a local asset if my CDN was to fail

Describe the solution you'd like
Use a errorImage prop which is a URL to a local asset to display (instead of the native browser broken image graphic)

Describe alternatives you've considered
Expose the dom node so that we can set event handlers on it (I thought it was possible but I can't find it, please show me how if I missed that)
Expose the dom node's error and handlers

I am developing a website in React.js which has a bunch of image calls.

So it was mandatory to implement lazy loading of the images so that images present in the viewport will be only called on the initial loading of the website,

I am currently using https://www.npmjs.com/package/react-lazy-load-image-component to implement lazy loading.

It is working fine in desktop browsers(including safari), android browsers but the image is not loading at all in the iPhone safari browser even after the scrolling.

This is how i use the component in my JS file,

<LazyLoadImage alt="Select a hero" src="/images/someimage.png" />

And I also use LazyLoadComponent to lazy load a section in my page and the content that is given inside this component is also not showing up in safari,

 <LazyLoadComponent> <WorkExplanation currentLanguage={this.props.currentLanguage} />
 </LazyLoadComponent>

@Aljullu Can you please help me to solve this issue?

Bug description
When using the lib a warning is printed in the browser console.

To Reproduce
When i use this in my NextJs site, the lazy loading works ok but the browser console print a warning.
<LazyLoadImage alt={post.title.rendered} src={featuredImage} />

The warning is:
Warning: Expected server HTML to contain a matching <span> in <figure>

The problem is also described in this issue: #15

Expected behavior
Not show any warning

Technical details:

• Server Side Rendering? [Yes]
• Device [Desktop]
• Operating System [GNU/Linux]
• Browser [Firefox and Chrome at least]

This problem seems to be only happening on Chrome. It works well on Edge and Safari.

When grabbing the side scroll bar to go fast to a certain position in the page, the scroll bar "let's go" of the cursor, even if you still have the mouse button pressed. This happens as soon as a lazy loaded component that hasn't been loaded yet appears in view.

Here I demonstrate how dragging the scrollbar works well when moving over loaded components, but lets go as soon as it has to load one: https://www.youtube.com/watch?v=mL1vLH_3prw

Happens for both LazyLoadComponent and LazyLoadImage.
I suspected that the page changing in size when scrolling may be the issue, so I tried making sure that the elements are exactly the same size before and after the lazy loading. That didn't solve the problem.

Im trying to manipulate an image that is passed into the LazyLoadImage component via a React Ref, however I dont seem to be able to do so. The reason being is because I would like to manipulate the image, for example zoom in (increase scale) on click.

It would be great if a ref could be passed into the LazyLoadImage component, which is then put onto the image.

I have tried putting a ref onto the LazyLoadImage component its self, but this doesn't seem to work and I am unable to manipulate the actual image (for example increase its scale).

Thanks,

In trackWindowScroll.js you are using normal event listeners. If you use Passive Event Listeners you get a better performance on scrolling:

https://developers.google.com/web/updates/2016/06/passive-event-listeners

All you have to do is to add a third parameter (true) to the listener.

Example:
window.addEventListener('resize', this.delayedScroll, true);

Best regards
Marcel

Nice library!

I'm trying to render other component as a placeholder using the placeholder prop, and I'm I tested pass a class component or stateless component but it's throwing this error
index.js:2178 uncaught at fetch Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of t.

So how I should use this prop?

Also If I try to pass the component as placeholder={<MyComponent />}
I'm getting this

index.js:2178 uncaught at fetch TypeError: this.placeholder.getBoundingClientRect is not a function

I think it should roll back to placeholderSrc if src is not found...

I can check at my end if there is no property, but if its set to black; the library before would just try to load a broken image; instead it should return something that makes the placeholderSrc render.

I used this

src={img_url ? img_url : placeholderImg}

Hi,

I have been attempting to use this package, specifically the LazyLoadImage, for a few days in my project. I had it implemented in the same was as the example under the Using trackWindowScroll HOC to improve performance section, where an array of images is mapped, however I did not specify a height and width.

With that being said, if you do not explicitly state a height and width - LazyLoadImage will not work. Without height and width, when I fetched 20 images from my API, all of the images were being fetched and loaded to the DOM at once on component render. As soon as I specified height and width, lazy load worked correctly and only images in the view port were being rendered.

I assumed height and width were not required as no where does it state that they are. I define the height and width in my css via a class name on the component, so again did not see the need for a height and width. I also noticed that some examples do not have a height or width passed into the LazyLoadImage, so again, did not think it was required.

This is either an issue with the component, or an issue with the documentation not being clear. Either way, It would be nice to specify this in the documentation :)

Bug description
I'm wrapping a component in trackScrollPosition, and it's adding scrollPosition to the component props, but it's always null.

To Reproduce
See it here: https://stackblitz.com/edit/react-x6zjfs

Expected behavior
I'd expect scrollPosition to update whenever the window scrolls.

Screenshots
N/A

Technical details:

• Package version: 1.3.2
• Server Side Rendering? No
• Device: Desktop
• Operating System: Mac OS
• Browser: Chrome

Bug description
The latest on npm is still 1.3.0, so I still get this bug.

To Reproduce

npm i [email protected]
// No matching version found for [email protected]

Expected behavior
No console.log("render") in build. 1.3.2 get installed by default.

Screenshots

Technical details:

• Package version 1.3.0
• Server Side Rendering? No
• Device Desktop
• Operating System Mac OS
• Browser Chrome

IntersectionObserver is a performant way to detect if an element is inside the viewport or not.

react-lazy-load-image-component should use that instead of some complex computations with the element position and the scroll position of the window to detect if the element is visible or not.

This must be implemented in a form that it fallbacks to the element position computations for browsers that don't support IntersectionObserver.

Bug description
Actually, when the component is used on server side rendering, it generate a "window is not defined" error.

Expected behavior
A test for "window" can be added in order to avoid access to this variable if not defined.
To be added in both LazyLoadImage and trackWindowScroll

Technical details:

• Server Side Rendering? Yes
• Device Desktop/Smartphone
• Operating System All
• Browser All

Thx,

I tried to use the component like this
<LazyLoadImage
delayTime={10000}
src={'/photo.jpg'} />}

but it's not working, and when I am digging into your source code, I found out LazyLoadImage pass the prop delayTime and delayMethod to LazyLoadComponent but then they are not in use in LazyLoadComponent,

could you let me know this is a bug or this feature never works?

Bug description
!important overrides my custom styles on container element

To Reproduce

.container {
background-image: url(https://someimgae.com);
}

List any other actions needed to reproduce the issue:
Add a background-image attribute to the container class

Expected behavior
I can override any style in this component

Bug description
scroll event didn't listen in IE, please support IE11 at least

To Reproduce
none
Expected behavior
none

Screenshots
none

Technical details:

• Server Side Rendering? [No]
• Device [Desktop]
• Operating System [Windows]
• Browser [IE 11]

Is your feature request related to a problem? Please describe.
I have a page with potentially 1,000 images on it. I'm worried about memory load on the browser as the user scrolls down the page. Lazily loading in will help to start with, but only if the images get unloaded when they scroll out of the viewport again.

Describe the solution you'd like
I'd like to be able to configure a LazyLoadImage to be unloaded when out of the viewport.

Describe alternatives you've considered
Pagination.

Additional context
N/A

Hi, it looks like the default placeholder raise a warning. Is there anything that I can do to somehow fix it?

This is the implementation that I did:

const ImagePoster = props => (
  <MovieGalleryContent placeholderSrc={props.placeholder}>
    <LazyLoadImage
      src={props.src}
      style={{ width: '100%', height: '100%' }}
      onError={e => {
        e.target.onerror = null;
        e.target.src = '/static/img/clapperboard.svg';
      }}
      delayTime="0"
    />
  </MovieGalleryContent>
);

This is the warning that I got:
Expected server HTML to contain a matching <span> in <div>.

Currently, react-lazy-load-image-component only works with the body scroll. This issue is about adding support for overflow: scroll and similar container elements.

A <LazyLoadImage> or <LazyLoadComponent> inside a scrollable container element should only be loaded when the element becomes visible to the user and remain unloaded until then,

Using this code, can you tell me why the placeholder doesn't show? I've attempted using placeholder and placeholderSrc. My expected behaviour would be to see loading text on screen before the image renders

              <LazyLoadImage
                src={image.uri}
                key={index}
                alt={`${title}`}
                onClick={() => handleImageClick(image.uri)}
                effect="blur"
                placeholderSrc={<h1>loading...</h1>}
                placeholder={<h1>test</h1>}
              />

Technical details:

• Package version ^1.4.3
• Server Side Rendering? no
• Device desktop
• Operating System Mac OS
• Browser Chrome

Is your feature request related to a problem? Please describe.
Use case: display a grid of preview images. To avoid image distortion and support various screen sizes and layouts, one can use images that have larger natural size than the possible preview sizes. These natural images should be centered, however - otherwise, you inadvertently crop the image to its top-left region, which is undesirable (top):

Describe the solution you'd like
A common trick is to apply a style to the image like this (potentially in the X-direction, too):

  position: "relative",
  top: "50%",
  transform: "translateY(-50%)"
  ...

However, this should only be applied to the node. I propose to introduce loadedImageProps which are then spread to the image in getImg:

// ...
return <img onLoad={this.onImageLoad()} {...imgProps} {...loadedImageProps} />;

which can be used like

<LazyLoadImage
    loadedImageProps={{ className: classes.imagePositionHack }}
    // ...
/>

Describe alternatives you've considered
Applying the style directly to the LazyLoad component doesn't work, because the relative transform meddles with the visibility detection. A simple className for the img component could be an option, similar to material-ui allows styling of children, e.g. <LazyLoad classes={{ img: myImgClassName }} ... />.

I can send a pull request in the day.

webpack://../node_modules/react-lazy-load-image-component/build/index.js

GET https://preactstarter.netlify.com/undefined 404 ()

If I'm not mistaken the blur and black and white effects are related to the placeholderSrc, and opacity creates a blank space then transition to the loaded image.

It would be nice if I define placeholder prop, then the opacity effect could use it

Ex:
<LazyLoadImage src="some-big-image.jpg" placeholder={<div>Loading...</div>} effect="opacity" />

Bug description
I have tried to put html elements/ img tag in dom before loading of the image using ur props in lazylading image component but its not working only console works nothing else

To Reproduce
const MyImage = (props) => {
const url = "https://i.giphy.com/media/xTk9ZvMnbIiIew7IpW/giphy.webp"
const spinner = () => {

    console.log('loading')
    return (
        <img src={url} alt="spinner" />
}
const afterloading = () => {
    console.log('after loading')
}

return (<div>
    <LazyLoadImage
        alt={props.alt}
        height={props.height}
        src={props.src} // use normal <img> attributes as props
        width={props.width}
        effect="blur"
        beforeLoad={spinner}
        afterLoad={afterloading}
        threshold="100" />
    <span>{props.keys}</span>
</div>
);

}

...

List any other actions needed to reproduce the issue:

• Scroll to '...'.
• Click on '...'.

Link to a repo where this issue can be reproduced if available:

Expected behavior
Write a clear and concise description of what you expected to happen versus what happened.

Screenshots
If applicable, add screenshots to help explain your problem.

Technical details:

• Package version :1.4.1
• Server Side Rendering? No
• Device Desktop
• Operating System : Windows,
• Browser :Chrome, Safari

With the change in this commit 364ce21 we stopped using window to store the IntersectionObserver and instead we store it in the component's class. That means every lazy-load image or component creates an IntersectionObserver.

It would be more efficient to use the previous approach but that was relying on the window object, which is not available in SSR.

We should use the global object available in SSR and CSR.

<LazyLoadImageComponent> should hide the placeholder background once the images is loaded. Otherwise, transparent images make it possible to see the placeholder behind them.

Bug description
Images are not downloading after the page loads. If I zoom out size to 90% then they are getting downloaded. On 100% resolution of screen no image is downloaded on the page.
This issue is occuring only on my chrome desktop.

I used

for lazy loading the image on the tuples

This is the original webpage on 100% resolution

And this is the screen after I zoom out the screen resolution to 90%

Technical details:

• Package version [e.g. 1.3.2]
• Device [Desktop]
• Operating System [e.g.Linux(Ubuntu)]
• Browser [e.g. Chrome 77.0.3865.90 (Official Build) ]

How do I make the image fit just like the full page to fit the screen of each of my devices and just fill it up?

just like this

Bug description
I use LazyLoadImage component. When I scroll page to image, and it is loading, on network tab I see that this image was loaded two times. Why does it happen and how can I fix it?

To Reproduce

<LazyLoadImage
  alt={alt}
  height={dimension}
  src={src}
  width={dimension}
/>

Technical details:

• Package version 1.3.2
• Server Side Rendering? Yes
• Device Desktop/Smartphone
• Operating System Mac OS
• Browser Chrome

Using the img tag's srcset attribute can improve performance massively by selectively loading different images for different devices based on resolution and pixel density. Does this library support srcSet lazy-loading, similar to lazysizes? Thanks!

Does this work with react native?

Bug description
I have a use case where I have to show the user more than 100K images. My API returns images in batches of 3K images. The lazyloading works on the first batch, i.e, when I render 3K images using the lazyloadcomponent. But when I append the next batch and the batch size increases to 6K. The browser hangs and in the network tab I see that all the images are fetched instead of only the images in the viewport. I see more than 4K requests made in the network tab.

To Reproduce

class ImageGrid extends React.Component {

  render() {
      const { results, imageGridSuffix, scrollPosition } = this.props;

      const imagePlaceholder = <div style={{ width: 224, height: 224, background: "#c9c9c9" }}/>

      let divs = [];

      for (var index=0;index < results.length/3;index++) {
        const result = results[index];
        divs.push(
        <div
          key={`result-${index}`}
          className={styles.canvasRoot}
        >
          <LazyLoadComponent placeholder={imagePlaceholder} delayTime={0} scrollPosition={scrollPosition} >
            <Canvas />
          </LazyLoadComponent>
        </div>);
      }
      return divs;
    }
}

export default trackWindowScroll(ImageGrid);

Also one thing I noticed is this issue kicks in only once the total batch size of images exceed 5K. before that everything renders as expected.

Expected behavior
I expected the component to lazy load irrespective of the array size it's using.

Technical details:

• Package version 1.3.2
• Server Side Rendering No
• Device Desktop
• Operating System Mac OS
• Browser Chrome

When uploaded images changing, image not view refresh.
at the time of render
The picture at placeholderSrc is not shown, the old loaded picture is displayed

<LazyLoadImage src={imageUrl} width={50} alt={''} effect="black-and-white" placeholderSrc={emptyImage} delayTime={1000} />

Does anyone have any solution in this regard?

Technical details:

• Package version [^1.4.1"]
• Server Side Rendering? [No]
• Device [Desktop/Smartphone]
• Operating System [ Windows, Mac OS]
• Browser [ Firefox, Chrome, Safari]

Hi there,

I've noticed when the state is updated it causes a re-render of all child elements. If that is a LazyLoad image with an effect of opacity on it the CSS transition is re-triggered.

Is there any way to prevent this?

Thanks!

Bug description
When package installed via npm it logging in console render.
It's placed in
react-lazy-load-image-component/src/components/LazyLoadComponent.jsx: console.log('render');

To Reproduce
npm i [email protected]
or just open console in devtools on https://www.albertjuhe.com/react-lazy-load-image-component/

Expected behavior
No debug code in build

Screenshots

Technical details:

• Package version 1.3.0
• Server Side Rendering? No
• Device [Desktop/Smartphone]: Any
• Operating System [e.g. Windows, Mac OS, GNU/Linux]: Any
• Browser [e.g. Firefox, Chrome, Safari]: Any

Bug description
When running npm run build an error is emitted.

$ npm run build

> [email protected] build /Users/rpierce/source/GithHub/react-lazy-load-image-component
> webpack

/Users/rpierce/source/GithHub/react-lazy-load-image-component/node_modules/webpack-cli/bin/config-yargs.js:89
				describe: optionsSchema.definitions.output.properties.path.description,
				                                          ^

TypeError: Cannot read property 'properties' of undefined
    at module.exports (/Users/rpierce/source/GithHub/react-lazy-load-image-component/node_modules/webpack-cli/bin/config-yargs.js:89:47)
    at /Users/rpierce/source/GithHub/react-lazy-load-image-component/node_modules/webpack-cli/bin/webpack.js:60:27
    at Object.<anonymous> (/Users/rpierce/source/GithHub/react-lazy-load-image-component/node_modules/webpack-cli/bin/webpack.js:515:3)
    at Module._compile (module.js:577:32)
    at Object.Module._extensions..js (module.js:586:10)
    at Module.load (module.js:494:32)
    at tryModuleLoad (module.js:453:12)
    at Function.Module._load (module.js:445:3)
    at Module.require (module.js:504:17)
    at require (internal/module.js:20:19)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `webpack`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/rpierce/.npm/_logs/2018-12-13T04_18_14_888Z-debug.log

To Reproduce
Paste the code that is producing the issue

npm run build

List any other actions needed to reproduce the issue:

• rm -rf node_modules && npm i

Link to a repo where this issue can be reproduced if available:

Expected behavior
npm run build succeeds without error

Technical details:

• This seems to be a known issue with the version of webpack-cli@2
• Upgrading to webpack-cli@3 seems to fix the issue and the build passes.

Bug description
When a has an effect property defined (e.g. "opacity"), the image is wrapped with a span (where all the corresponding classes are applied (e.g. lazy-load-image-loaded)). Said span comes with some styles already defined in the component, as seen in method getWrappedLazyLoadImage() of LazyLoadImage.jsx. This raises problems when the wrapping element is expected to have its default behavior. In my case, I needed it to stay displayed as a block (as an would be), but instead it becomes an inline-block. In my case it breaks my view (see screenshot below)

To Reproduce
Create a with an effect and inspect it.

<LazyLoadImage src="test.jpg" alt="Test" effect="opacity" />

Expected behavior
The wrapping element shouldn't change how the component is rendered.

Perhaps the style for the wrapper should be defined in the CSS of each effect instead.

Screenshots

Technical details:

• Package version: 1.3.2
• Server Side Rendering? No
• Device: any
• Operating System: doesn't apply
• Browser: happens with both Firefox and Chrome

Maybe it is related -or can be circumvented- if #31 is implemented

Are you planning to add tag picture support?

Any plans to support TypeScript I can start with the Types definitions file? :)

i have a horizontal list images and I would like to apply lazyloading for items in those list too.

Describe the solution you'd like
Server Side Rending. Send IMG tag directly to client

Bug description

I am using placeholder to always display images but in low resolution. I do so because I don’t know the size of images ahead of time and use in-page anchors for navigation (this breaks when the browser can’t figure out the position of elements because images aren’t rendered). I use width="100%" and let the browser determine the height using the natural aspect ratio. This all worked perfectly before, but when using LazyLoadImage, a flicker occurs when high resolution images (that aren’t cached) are rendered (see animated gif where first cover image is cache vs the three others).

To Reproduce

<LazyLoadImage
  src={src}
  placeholder={<img src={thumbnailSrc} alt={props.alt} width="100%" />}
  scrollPosition={props.scrollPosition}
  alt={props.alt}
  width="100%"
/>

Expected behavior

No flicker

Screenshots

Technical details:

• Package version? 1.4.1
• Server Side Rendering? No
• Device? Desktop (but probably both)
• Operating System? macOS
• Browser? Firefox, Chrome, Safari (issue present of all three)

It would be helpful.

Bug description
I test my React/Next.js app with jest and @testing-library/react and use LazyLoadImage.
If I wrap my component with trackWindowScroll test passed, but in the console, I have a warning:

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

    Check the render method of `r`.
        in Grid (created by r)
        in r (at Grid.test.js:12)

To Reproduce
My component

const Grid = ({ items }) => {
  return (
    <div data-testid="items-grid">
        items.map(item => (
          <LazyLoadImage
            placeholderSrc={item.lazySrc}
            src={item.src}
            alt={item.name}
            effect="blur"
            width={300}
            threshold={300}
            afterLoad={handleImageLoaded}
            onError={handleError}
          />
        ))}
    </div>
  );
};

export default trackWindowScroll(Grid);

Test

describe('CityTilesGrid', () => {
  test('should render correctly', () => {
    const { getByTestId } = render(<Grid items={mockItems} />);
    const grid = getByTestId('items-grid');

    expect(grid).toMatchSnapshot();
  });
});

Could you help me with how to get rid of this warning?

Bug description

I'm expecting image flickering while component switches from placeholderSrc to src image on Safari browser. It seems that in Safari placeholderSrc gets removed from the DOM before src attribute's image is applied. And it Chrome src attribute's image is applied right on top of placeholderSrc image.

To Reproduce

I'm using LazyLoadImage with params provided below.

 <LazyLoadImage
      alt={alt}
      className={'lazy-image-container'}
      src={imgSrc}
      key={id}      
      placeholderSrc={thumbnail ? thumbnail : defaultLogo}
      effect={thumbnail ? '' : 'custom'}
    />

Expected behavior

src attribute image should be applied right on top of placeholderSrc image in Safari browser.

Screenshots

Loading in Chrome (no flickering):

Loading in Safari (flickering):

Additional Details:

I might found out that flickering happens in LazyLoadImage.jsx component in const lazyLoadImage = loaded ? image : this.getLazyLoadImage(image); line. If this.state.loaded is true the lazyLoadImage value is this.getImg() function's result otherwise - this.getLazyLoadImage(image). If you won't check for loaded state, and always write to lazyLoadImage variable result of this.getLazyLoadImage(image) function the flickering will disappear.

Technical details:

• Package version [1.3.2]
• Server Side Rendering? [No]
• Device [Desktop]
• Operating System [Mac OS]
• Browser [Safari]
• React version [16.6.0]

Bug description
Write a clear and concise description of what the bug is.
When the component is scrolled into view and is loading the animations are not working correctly

To Reproduce
Paste the code that is producing the issue

...Add lazy load to an image with     effect="blur"
 prop and it will not work i have tried all effects

List any other actions needed to reproduce the issue:

• Scroll to '...'.
• Click on '...'.

Link to a repo where this issue can be reproduced if available:

Expected behavior
Write a clear and concise description of what you expected to happen versus what happened.

Screenshots
If applicable, add screenshots to help explain your problem.

Technical details:

• Package version [e.g. 1.2.0]
• Server Side Rendering? [Yes/No]
• Device [Desktop/Smartphone]
• Operating System [e.g. Windows, Mac OS, GNU/Linux]
• Browser [e.g. Firefox, Chrome, Safari]

Bug description
I'm not sure if it's a bug or missing feature.
I would expect to see placeholder again after changing the src prop in <LazyLoadImage />

To Reproduce
I use this.props.imageUrl to get an url from parent component.
this.props.imageUrl changes on an external event. I think it does not matter how.

The code for reproducing the issue is:

<LazyLoadImage
                        src={this.props.imageUrl}
                        effect="opacity"
                        placeholder={<div className="loader" />}
                    />

Actions to reproduce:

• after loading the image, change this.props.imageUrl to other URL.
  The image is loaded, but placeholder nor the beforeLoad and afterLoad functions are not called.

Expected behavior
I would expect to have:

1. Placeholder displayed when image is loading again after changed src property.
2. Functions beforeLoad and afterLoad called when src property was changed.

Technical details:

• Package version [1.4.3]
• Server Side Rendering? [No]
• Device [Desktop]
• Operating System [Mac OS]
• Browser [Chrome]

Bug description
Write a clear and concise description of what the bug is.
all the images loaded in the same time;

To Reproduce
Paste the code that is producing the issue

import React from "react";
import { LazyLoadImage } from 'react-lazy-load-image-component';
import uuid from 'uuid/v4';
import 'react-lazy-load-image-component/src/effects/blur.css';

import styles from './lazyImages.less';
import images from "./images";

const LazyImage = () => {
	return (
		<div className={styles.lazyImages}>
			{
				images().map((item) => {
					return <LazyLoadImage effect="blur" src={item.src} key={uuid()}/>
				})
			}
		</div>
	);
};

export default LazyImage;

const images = () => {
	return [
		{
			src: '/app/images/lazyImages/a.jpg'
	    },
		{
			src: '/app/images/lazyImages/b.jpg'
		},
		{
			src: '/app/images/lazyImages/c.jpg'
		},
		{
			src: '/app/images/lazyImages/d.jpg'
		},
		{
			src: '/app/images/lazyImages/e.jpg'
		},
	]
};
export default images;

.lazyImages{
    img{
        width: 100vw;
    }
}

I havn't scroll yet, all the images loaded already;

List any other actions needed to reproduce the issue:

• Scroll to '...'.
• Click on '...'.

Link to a repo where this issue can be reproduced if available:

Expected behavior
Write a clear and concise description of what you expected to happen versus what happened.

Screenshots
If applicable, add screenshots to help explain your problem.

Technical details:

• Package version [1.3.2]
• Server Side Rendering? [no]
• Device [desktop but mobile mode]
• Operating System [windows]
• Browser [chrome]

Some ideas that might or might not be implemented in the future, but good to have in a list.

• Add a prop to load the image by default. (1aa87da)
• Create a generic component to lazy load anything, not only images. (49f180f)
• Allow components to listen to scroll/resize events without needing the HOC. (9833d85)
• Add debounce/throttle. (78047bd)
• Add some way to have a low-quality image placeholder that doesn't disappear when loading the image. Probably adding a wrapper element with background-image. (662389b)
• Add optional CSS effects when loading the image. (784f610)
• Use IntersectionObserver if the browser supports it. (#16 → #6)
• Make it work with overflow: scroll containers (#17 → #28).
• Create different Webpack environments for production/development (#18).
• Hide the placeholder after the image is loaded (#19).