Render a placeholder div for omitted items

xiaolin · Jan 22, 2017 · 4c2156c · 4c2156c
1 parent 91c6afb
commit 4c2156c
Showing 1 changed file with 7 additions and 9 deletions.
diff --git a/src/ImageGallery.jsx b/src/ImageGallery.jsx
@@ -773,25 +773,23 @@ export default class ImageGallery extends React.Component {
       const renderItem = item.renderItem ||
         this.props.renderItem || this._renderItem.bind(this);
 
+      const showItem = !this.props.lazyLoad || alignment || this._lazyLoaded[index];
+      if (showItem && this.props.lazyLoad) {
+          this._lazyLoaded[index] = true;
+      }
+
       const slide = (
         <div
           key={index}
           className={'image-gallery-slide' + alignment + originalClass}
           style={Object.assign(this._getSlideStyle(index), this.state.style)}
           onClick={this.props.onClick}
         >
-          {renderItem(item)}
+          {showItem ? renderItem(item) : <div style={{ height: '100%' }}></div>}
         </div>
       );
 
-      if (this.props.lazyLoad) {
-        if (alignment || this._lazyLoaded[index]) {
-          slides.push(slide);
-          this._lazyLoaded[index] = true;
-        }
-      } else {
-        slides.push(slide);
-      }
+      slides.push(slide);
 
       let onThumbnailError = this._handleImageError;
       if (this.props.onThumbnailError) {