React Lazy Load Image Component not working in safari browser

[AkhilSuresh]

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?

[Aljullu]

Hi @AkhilSuresh thanks for your report and excuse me for the delay answering.

Unfortunately I don't have any iOS device to test it. However, doing some testing with Browser Stack it looks like the demo site (https://www.albertjuhe.com/react-lazy-load-image-component/) works fine.

In order to diagnose the problem, it would be helpful if you could provide a project where the error can be reproduced and under which iOS version you are testing it. The code snippets you provided should work fine so I guess the issue must be somewhere else.

[Aljullu]

Closed in #28.