Image component

We need to implement an Image component to support lazy load. This component will be used also by html2react.

Features:

  • :white_check_mark: Check if native lazy load is supported and use it if available. (loading="lazy")
  • :white_check_mark: Check if IntersectionObserver is supported and implement lazy load within React.
    • :white_check_mark: Implement useInView hook.
  • :white_check_mark: Implement a script to render on SSR that runs if the browser doesn’t support Proxys. This script will map data-srcs to srcs.
  • :white_check_mark: Implement <no-script> solution.
  • :x: Implement solution for AMP (<amp-img>)

References:

Native lazy load: https://addyosmani.com/blog/lazy-loading/
Lazy load: https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/
Hook for IntersectionObserver: https://usehooks.com/useOnScreen/
Check if Proxy is supported: https://github.com/frontity/frontity/blob/427563e9521d2fed03f35f9dab383326059c7062/packages/core/src/client/index.tsx#L9

PR:

2 Likes