react-image-gallery - npm Package Compare versions

Comparing version 1.0.5 to 1.0.6

build/image-gallery.js

@@ -96,2 +96,3 @@ 'use strict';
     _this.onThumbnailMouseLeave = _this.onThumbnailMouseLeave.bind(_this);
+    _this.handleImageError = _this.handleImageError.bind(_this);
     _this.pauseOrPlay = _this.pauseOrPlay.bind(_this);
@@ -1284,8 +1285,20 @@ _this.renderThumbInner = _this.renderThumbInner.bind(_this);
   }, {
+    key: 'handleImageLoaded',
+    value: function handleImageLoaded(event, item) {
+      var onImageLoad = this.props.onImageLoad;
+
+      var imageExists = this.loadedImages[item.original];
+      if (!imageExists && onImageLoad) {
+        this.loadedImages[item.original] = true; // prevent from call again
+        // image just loaded, call onImageLoad
+        onImageLoad(event);
+      }
+    }
+  }, {
     key: 'renderItem',
     value: function renderItem(item) {
+      var _this10 = this;
+
       var isFullscreen = this.state.isFullscreen;
-      var _props15 = this.props,
-          onImageError = _props15.onImageError,
-          onImageLoad = _props15.onImageLoad;
+      var onImageError = this.props.onImageError;
 
@@ -1301,3 +1314,5 @@ var handleImageError = onImageError || this.handleImageError;
           {
-            onLoad: !this.isImageLoaded(item) ? onImageLoad : null,
+            onLoad: function onLoad(event) {
+              return _this10.handleImageLoaded(event, item);
+            },
             onError: handleImageError
@@ -1325,3 +1340,5 @@ },
           title: item.originalTitle,
-          onLoad: !this.isImageLoaded(item) ? onImageLoad : null,
+          onLoad: function onLoad(event) {
+            return _this10.handleImageLoaded(event, item);
+          },
           onError: handleImageError
@@ -1368,19 +1385,19 @@ }),
           isPlaying = _state15.isPlaying;
-      var _props16 = this.props,
-          additionalClass = _props16.additionalClass,
-          indexSeparator = _props16.indexSeparator,
-          isRTL = _props16.isRTL,
-          items = _props16.items,
-          thumbnailPosition = _props16.thumbnailPosition,
-          renderFullscreenButton = _props16.renderFullscreenButton,
-          renderCustomControls = _props16.renderCustomControls,
-          renderLeftNav = _props16.renderLeftNav,
-          renderRightNav = _props16.renderRightNav,
-          showBullets = _props16.showBullets,
-          showFullscreenButton = _props16.showFullscreenButton,
-          showIndex = _props16.showIndex,
-          showThumbnails = _props16.showThumbnails,
-          showNav = _props16.showNav,
-          showPlayButton = _props16.showPlayButton,
-          renderPlayPauseButton = _props16.renderPlayPauseButton;
+      var _props15 = this.props,
+          additionalClass = _props15.additionalClass,
+          indexSeparator = _props15.indexSeparator,
+          isRTL = _props15.isRTL,
+          items = _props15.items,
+          thumbnailPosition = _props15.thumbnailPosition,
+          renderFullscreenButton = _props15.renderFullscreenButton,
+          renderCustomControls = _props15.renderCustomControls,
+          renderLeftNav = _props15.renderLeftNav,
+          renderRightNav = _props15.renderRightNav,
+          showBullets = _props15.showBullets,
+          showFullscreenButton = _props15.showFullscreenButton,
+          showIndex = _props15.showIndex,
+          showThumbnails = _props15.showThumbnails,
+          showNav = _props15.showNav,
+          showPlayButton = _props15.showPlayButton,
+          renderPlayPauseButton = _props15.renderPlayPauseButton;
 
@@ -1387,0 +1404,0 @@

package.json

 {
   "name": "react-image-gallery",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "React carousel image gallery component with thumbnail and mobile support",
@@ -5,0 +5,0 @@ "main": "./build/image-gallery.js",

src/ImageGallery.jsx

@@ -227,2 +227,3 @@ import clsx from 'clsx';
     this.onThumbnailMouseLeave = this.onThumbnailMouseLeave.bind(this);
+    this.handleImageError = this.handleImageError.bind(this);
     this.pauseOrPlay = this.pauseOrPlay.bind(this);
@@ -1249,5 +1250,15 @@ this.renderThumbInner = this.renderThumbInner.bind(this);
 
+  handleImageLoaded(event, item) {
+    const { onImageLoad } = this.props;
+    const imageExists = this.loadedImages[item.original];
+    if (!imageExists && onImageLoad) {
+      this.loadedImages[item.original] = true; // prevent from call again
+      // image just loaded, call onImageLoad
+      onImageLoad(event);
+    }
+  }
+
   renderItem(item) {
     const { isFullscreen } = this.state;
-    const { onImageError, onImageLoad } = this.props;
+    const { onImageError } = this.props;
     const handleImageError = onImageError || this.handleImageError;
@@ -1261,3 +1272,3 @@ const itemSrc = isFullscreen ? (item.fullscreen || item.original) : item.original;
             <picture
-              onLoad={!this.isImageLoaded(item) ? onImageLoad : null}
+              onLoad={event => this.handleImageLoaded(event, item)}
               onError={handleImageError}
@@ -1289,3 +1300,3 @@ >
               title={item.originalTitle}
-              onLoad={!this.isImageLoaded(item) ? onImageLoad : null}
+              onLoad={event => this.handleImageLoaded(event, item)}
               onError={handleImageError}
@@ -1292,0 +1303,0 @@ />

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

138143

increased by0.65%

Lines of code

3364

increased by0.75%

No dependency changes