Skip to content

Commit

Permalink
Use display: none to prevent background transitions
Browse files Browse the repository at this point in the history
This caused images to load repeatedly when cache is off
  • Loading branch information
xiaolin committed Jul 20, 2021
1 parent d14cf8c commit b1ff538
Showing 1 changed file with 7 additions and 10 deletions.
17 changes: 7 additions & 10 deletions src/ImageGallery.js
Original file line number Diff line number Diff line change
Expand Up @@ -423,7 +423,11 @@ class ImageGallery extends React.Component {
translate = `translate3d(${translateX}%, 0, 0)`;
}

// don't show some slides while transitioning to avoid background transitions
const isVisible = this.isSlideVisible(index);

return {
display: isVisible ? 'inherit' : 'none',
WebkitTransform: translate,
MozTransform: translate,
msTransform: translate,
Expand Down Expand Up @@ -524,14 +528,7 @@ class ImageGallery extends React.Component {
</div>
);

if (infinite) {
// don't add some slides while transitioning to avoid background transitions
if (this.shouldPushSlideOnInfiniteMode(index)) {
slides.push(slide);
}
} else {
slides.push(slide);
}
slides.push(slide);

if (showThumbnails) {
const igThumbnailClass = clsx(
Expand Down Expand Up @@ -631,9 +628,9 @@ class ImageGallery extends React.Component {
return isTransitioning && indexIsNotPreviousOrNextSlide;
}

shouldPushSlideOnInfiniteMode(index) {
isSlideVisible(index) {
/*
Push (show) slide if slide is the current slide and the next slide
Show slide if slide is the current slide and the next slide
OR
The slide is going more than one slide left or right, but not going from
first to last and not going from last to first
Expand Down

0 comments on commit b1ff538

Please sign in to comment.