lazy-image-reactjs

React Image Lazy Load

• Based on window.IntersectionObserver

Description

This package created for the lazy loading images

• Lazy-loading of images or other content as a page is scrolled.
• Implementing "infinite scrolling" web sites, where more and more content is loaded and rendered as you scroll, so that the user doesn't have to flip through pages.
• Deciding whether or not to perform tasks or animation processes based on whether or not the user will see the result.
• dataSrc attribute allows you to display a placeholder image before displaying a real image

import LazyImage from 'lazy-image-reactjs';

// By default used this options for IntersectionObserver
const options = {
  threshold: 0.01,
  rootMargin: '75%',
}

function App() {
  return (
    <div>
      <LazyImage
        alt="alt"
        src="image.jpg"
        dataSrc="alt.img"
        options={options}
      />
    </div>
  );
}

You can play with it in sandbox