😴 Super lazy images
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
src
.gitignore
README.md
package.json
tsconfig.json
yarn.lock

README.md

Afterimage

Images that load after they have been scrolled in to view.

Installation

npm i --save afterimage

Or if yarn's your jam:

yarn add afterimage

Usage

For a complete example, visit here.

import * as React from "react";
import AfterImage from "afterimage";

export default function App() {
  return (
    <>
      <div style={{ height: "120vh" }} />
      <AfterImage src="some-image.jpg" />
      ☝️ is sooooo lazy!
    </>
  );
}

How it works

TLDR afterimage uses a IntersectionObserver to determine whether the image is in the viewport and defers applying the src attribute of the <img /> tag until it is.

Read the blog post if you want a more in-depth explanation.

Options

Afterimage will render a placeholder element in place of the actual image whilst the image is off-screen or is loading. By default, the placeholder will be a 16:9 size, but if you know the aspect ratio of your image ahead of time, you can set both aspectHeight and aspectWidth. If you wish to turn the placeholder off set withPlaceholder to false.

interface Props {
  src: string;
  className?: string;
  onLoad?: () => any;
  aspectHeight?: number;
  aspectWidth?: number;
  withPlaceholder?: boolean;
}
  • src The source of the image (just like you would with an <img /> tag).
  • className Optional string passed to the top level element for styling. Doesn't replace any CSS classes listed below
  • onLoad optional callback called when the image has fully loaded.
  • aspectHeight Optional number representing the image's aspect ratio height, i.e. 9 in 16:9. Used to size the placeholder element. Defaults to 9.
  • aspectWidth Similar to aspectHeight. Defaults to 16.
  • withPlaceholder boolean to determine whether to render a placeholder element or not. Useful if you do not know the aspect ratio of the image ahead of time.

Afterimage will apply any other props to the <img /> tag. For example, alt, onClick etc.

CSS classes

CSS class names are structured with BEM and can be overridden with CSS. Afterimage comes with default inline styles.

  • afterimage applied to the top level element
  • afterimage--loaded applied when afterimage has loaded the image in to view
  • afterimage__image applied to the <img /> tag itself
  • afterimage__placeholder applied to the placeholder element

You'll have to use !important to override the inline styles! Sorry!