Consider preloading images about react-images HOT 10 CLOSED

@jossmac is this enhancement for preloading of the larger lightbox images or the gallery preview images?

from react-images.

@neptunian the larger lightbox images. The idea was to implement this with a Boolean prop preloadImages.

The idea was to loop over the images array and preload using new Image(). I have a working example in a commercial project where I've forked this component. Is it something you'd be interested in?

from react-images.

@neptunian it's worth mentioning that this component doesn't know about, and has no need for, the preview thumbnails. That can be handled elsewhere 😄

from react-images.

@jossmac right, just makin' sure ;) Just had someone open an issue in my gallery component about it (neptunian/react-photo-gallery#3). If you've got a working solution for it, be my guest! :)

from react-images.

@jossmac i'd be interested in doing this if you'd like to show me the working example you had in mind.

from react-images.

@neptunian thanks for the offer. I'd like to sort it out though

from react-images.

@jossmac sounds good.

from react-images.

Started using react-images and it fits my use case perfectly (keep control over the gallery, and use something else for the lightbox part). Preloading would be a huge plus for me as well.
Has anyone tried just rendering the previous and next images in a 0 width div and let the browser do the preloading ?

Something like

    renderPreloadImage(extraIndex) {
        const { images, currentImage } = this.props;
        const idx = currentImage + extraIndex
        if (!images || !images.length || idx < 0 || idx >= images.length) return null;

        const image = images[currentImage];

        let srcset;
        let sizes;

        if (image.srcset) {
            srcset = image.srcset.join();
            sizes = '100vw';
        }

        return (
                <img style={{
                        width: 0, height: 0
                    }}
                    sizes={sizes}
                    src={image.src}
                    srcSet={srcset}
                />
        );
    }

Used as

  <div className={classes.content}>
    {this.renderCloseBar()}
    {this.renderImages()}
    {this.state.isLoaded && this.renderPreloadImage(-1)}
    {this.state.isLoaded && this.renderPreloadImage(1)}
  </div>

(this.state.isLoaded could be used to keep track of if the current image is already loaded, to only preload once the image itself is loaded)

from react-images.

That's an interesting thought @GregoryPotdevin thanks for sharing. I have a plan for this that I'd really like to try out

I'm sorry for dropping this for so long, but I will pick it up and add it to my list for this week.

from react-images.

Great !

Another way to do it that would work with custom components (and not just image links) would be to render the normal previous/next but inside a hidden div. But I'm not sure how and when the different browsers preload images in hidden divs. A clean implementation with this idea could also provide scrolling animations when changing currentImage.

from react-images.