Pre-render `<Image content={...} />` like `original={...}` does.

[k-funk]

Is your feature request related to a problem? Please describe. Custom content doesn't get pre-loaded

Describe the solution you'd like Load ~2 slides of custom content the way that using original={...} does.

Describe alternatives you've considered Using original={...} instead of custom={...}

Additional context When using original={...}, it looks like images are on the adjacent slides are being loaded in advance. This is great! The only problem is that Im trying to leverage NextJS's <Image /> component like so:

        <Gallery>
          <Masonry breakpointCols={{ default: 3, 576: 1 }}>
              {images.map((image, idx) => (
                <Item
                  key={image.src}
                  content={( // this is the point of interest
                    <Image
                      src={image}
                      alt={`${name} Image ${idx}`}
                      layout="responsive"
                    />
                  )}
                  height={image.height}
                  width={image.width}
                >
                  {({ ref, open }) => (
                    <a
                      href="#"
                      onClick={(e) => {
                        e.preventDefault()
                        open(e)
                      }}
                      ref={ref as React.MutableRefObject<HTMLAnchorElement>}
                    >
                      <div className="listing-masonry-item-wrapper">
                        <Image
                          src={image}
                          alt={`${name} Image ${idx}`}
                          layout="responsive"
                          className="listing-masonry-item"
                          sizes="400px"
                          lazyBoundary="1000px"
                        />
                      </div>
                    </a>
                  )}
                </Item>
              ))}
          </Masonry>
        </Gallery>

This works, so that all my images use the same sizes and srcset as in other parts of my app, but I lose the pre-loading. Users will sit on a blank screen until the image loads, which seems possible to optimize for.

Is it possible to render-and-hide the content of adjacent slides?

[akhmadullin]

Hi.

Prop content was added to show in gallery some reactive content (mb some text or something else) - we didn't expect, that it will be useful for showing images.

Because the aim of content prop is showing not image content, we don't think, that adding of preloading by default is necessary. There is no need to preload react (not image) content.

If you need to preload content of <Image /> components, you can do it by yourself via our API and PhotoSwipe events:

const onOpen = (pwspInstance) => {
    pwspInstance.on('change', () => {
        // add preloading logic
    });
};
...
<Gallery onOpen={onOpen}>
...
</Gallery>