Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Lazy loading multiple images from random points of the array?

See original GitHub issue

I have noticed that when I click the arrows for the next/prev slide there are multiple images loading in. I have tried to make sense of it because I am sure that there is a reason for it.

Currently on first click I have the next slide loading (which I would expect) then 2 images from the end of the images array. Then on the 2nd click I have the same but 2 images from the start and end of the array, then the next click (3rd) its also getting 2 images for the slide 2 previous to the current slide. Then that happens going forward.

I hope this makes sense? I have included some screen shots to maybe help you to better understand this issue.

First click Screen Shot 2019-05-16 at 12 57 41

Second click Screen Shot 2019-05-16 at 13 00 14

Third click Screen Shot 2019-05-16 at 14 25 57

I am passing the following props to ImageGallery:

<ImageGallery
  items={imageArray2}
  lazyLoad
  renderLeftNav={this.renderLeftNav}
  renderRightNav={this.renderRightNav}
  showIndex={imageArray2.length > 1}
  onSlide={this.fadeIn}
/>

The array is structured as follows:

original: slide.entity.fieldImage.entity.fieldMediaImage.large.url,
        originalAlt: slide.entity.fieldImage.entity.fieldMediaImage.alt,
        originalTitle: slide.entity.fieldCaption,
        description: slide.entity.fieldCaption,
        thumbnail: slide.entity.fieldImage.entity.fieldMediaImage.thumb.url,
        thumbnailAlt: slide.entity.fieldImage.entity.fieldMediaImage.alt,
        thumbnailTitle: slide.entity.fieldCaption,
        imageSet: [
          {
            srcSet: slide.entity.fieldImage.entity.fieldMediaImage.small.url,
            media: '(max-width: 576px)',
          },
          {
            srcSet: slide.entity.fieldImage.entity.fieldMediaImage.medium.url,
            media: '(min-width: 768px)',
          },
          {
            srcSet: slide.entity.fieldImage.entity.fieldMediaImage.large.url,
            media: '(min-width: 1280px)',
          },
        ],

I hope this is enough to go on for the moment. If you would like anything else or anymore info please let me know.