How can i load a low-quality or low-res version before loading the full image?

[FunctionDJ]

I have this component implemented in a way where it may be frequently opened and closed with different sets of images (preload doesn't apply) and i want to reduce the delay between opening the lightbox and showing the user a large image - regardless of it's resolution or quality.

This component supports srcSet, but in practise the rendered dimensions of the image when opening the lightbox will usually be larger than the image itself, but the bandwidth might still be low which makes the user wait for the image to load.

If i could re-use the thumbnail i'm providing for the thumbnail plugin it would already help a ton, but ideally i could just programmatically instruct this component to load a smaller (lower quality) version of the image before automatically loading the full quality version once the lower quality preview has finished loading.

Is there such a mechanism in this library?

If yes, where can i find the documentation?

If not, how can i build this myself inside this library? (Custom render function maybe?)

[igordanchenko]

I'm afraid there is no built-in feature that would provide the desired functionality out of the box. However, you can implement it with a custom render function.

[FunctionDJ]

Thanks for the response. I'll look into that. If anyone reading this knows any resources on this topic (i.e. how i could code said render function) i'd be thankful for them!

[Dzemik55]

How can we implement custom render function?

Thanks for the response. I'll look into that. If anyone reading this knows any resources on this topic (i.e. how i could code said render function) i'd be thankful for them!

Have you come up with anything, any solution? I would also need something similar and so far I am without results.

[FunctionDJ]

@Dzemik55 I have not written such an implementation yet.

[igordanchenko]

@FunctionDJ, @Dzemik55

Here is a draft implementation illustrating one possible approach.

import Lightbox, { ImageSlide, isImageSlide, RenderSlideProps, SlideImage } from "yet-another-react-lightbox";
import Thumbnails from "yet-another-react-lightbox/plugins/thumbnails";

// ...

function CustomImageSlide({ slide, ...rest }: RenderSlideProps<SlideImage>) {
  const [preloaded, setPreloaded] = React.useState(false);
  const preloading = React.useRef<string>(undefined);

  React.useEffect(() => {
    preloading.current = slide.src;

    const image = new Image();
    image.onload = () => {
      if (preloading.current === slide.src) {
        setPreloaded(true);
      }
    };
    image.src = slide.src;

    return () => {
      image.src = ""; // abort preloading current source
      preloading.current = undefined;
      setPreloaded(false);
    };
  }, [slide.src]);

  return (
    <ImageSlide
      slide={{ ...slide, src: (!preloaded && slide.thumbnail) || slide.src }}
      style={{ flex: 1, maxWidth: "100%", maxHeight: "100%" }}
      {...rest}
    />
  );
}

export default function App() {
  const [open, setOpen] = React.useState(false);

  return (
    <>
      <Lightbox
        open={open}
        close={() => setOpen(false)}
        slides={slides}
        plugins={[Thumbnails]}
        render={{
          slide: ({ slide, ...rest }) =>
            isImageSlide(slide) ? <CustomImageSlide {...{ slide, ...rest }} /> : undefined
        }}
      />

      <button type="button" className="button" onClick={() => setOpen(true)}>
        Open Lightbox
      </button>
    </>
  );
}