search

loktar00 / react-lazy-load

React component that renders children elements when they enter the viewport.
MIT License
979 stars 166 forks source link

Support browsers without IntersectionObserver #165

Open jorrit opened 1 year ago

jorrit commented 1 year ago

I sometimes get error reports from old browsers that lack IntersectionObserver. I don't want to ship a polyfill for the small group of users that use these old browsers, I prefer to just show the lazy-loaded content instead.

Would you accept a PR or make the change yourself that makes lazy loaded content visible when IntersectionObserver is not available?

loktar00 commented 1 year ago

You mean it just completely ignores the aspect of lazy loading and just displays the image fully?

Kind of on the fence... we're talking about 5% of users worldwide at most and for IE11 I'm assuming which went end of life almost exactly a year ago now.

https://caniuse.com/intersectionobserver

It really depends honestly how much it might change the component code since right now it's pretty slim overall.

jorrit commented 1 year ago

The error was generated by an obsolete iPad device. My idea was to add this to the top: const intersectionNotSupported = typeof window !== 'undefined' && !('IntersectionObserver' in window);

set state.visible to true in the constructor if intersectionNotSupported is true. Return early in componentDidMount() if componentDidMount is true.

jorrit commented 1 year ago

I just received an error report that IntersectionObserver wasn't available even on Safari 15. It seems it's marked as an 'experimental ' feature that could be disabled by the user.

loktar00 commented 1 year ago

Oh Safari...

Honestly I really think a polyfill would be appropriate, safari 15 is dropping out pretty fast vs 16. Just feels like a step backwards. From my former days my rule was 5% or less and I'd drop support this was for IE6-11 Safari 15 seems to be very much below that threshold fortunately.

loktar00 commented 1 year ago

166 is probably related to this. If you do a PR I'll happy accept since they're using 16 and it's having an issue as well. At the end of the day it doesn't "hurt" just adds a bit more code but that's better than the alternative which isn't showing any content for a user.