Both Image and BackgroundImage make use of ImageLoader internally. It can be useful for creating your own loader and any advanced use case that the other two components can't cater for.

ImageLoader is used via a render prop as the child. The method provided as the child will be called with an object with the following keys:

  • hasLoaded (bool) - True when image retrieval was success
  • shouldShowLoader (bool) - True when the loader should be shown, this is useful for when the image has loaded but you want to continue to keep the loader mounted for transitionTime seconds to complete the transition.
  • hasFailed (bool) - True when retrieving the image was unsuccessful
  • src (string) - The source of the image (pass-through)
import { ImageLoader } from "react-image-and-background-image-fade";

class AwesomeOLoader extends Component {
  render() {
    return (
      <ImageLoader src="awesome-o.gif" transitionTime="0.3s">
        {({ hasLoaded, shouldShowLoader, hasFailed, src }) => (
          <div className="AwesomeOLoader">
            {shouldShowLoader && !hasFailed && (
              <div className="AwesomeoLoader__loading">
                Awesome-o is loading ...

            {hasFailed && (
              <div className="AwesomeoLoader__failed">
                Awesome-o has failed :(

            {hasLoaded && (
                style={{ backgroundImage: `url(${src})` }}
                Awesome-o has Loaded!! :)


All initial prop values are undefined unless otherwise specified. src and children.

src [string]URI to the image, can be an imported local image or a remote image.
transitionTime [string default 0.3s]Time used for the transition. This can be any valid CSS timing value such as "0.3s", "300ms", "3s". Works in conjunction with shouldShowLoader. See ImageLoader.
lazyLoad [bool default false]Enable or disable lazy loading. See lazy loading.
childrenRender prop to render. Calls children with the following: ({ hasLoaded, shouldShowLoader, hasFailed, src }). See Overview.