react-image-fallback - npm Package Compare versions

Comparing version 7.1.0 to 8.0.0

lib/index.js

@@ -40,5 +40,7 @@ "use strict";
 		_this.state = {
-			imageSource: props.initialImage
+			imageSource: null
 		};
 		_this.setDisplayImage = _this.setDisplayImage.bind(_this);
+		_this.handleInitialTimeout = _this.handleInitialTimeout.bind(_this);
+		_this.isLoaded = false;
 		return _this;
@@ -48,4 +50,24 @@ }
 	_createClass(ReactImageFallback, [{
+		key: "handleInitialTimeout",
+		value: function handleInitialTimeout() {
+			var _this2 = this;
+
+			if (this.props.initialTimeout && this.props.initialTimeout > 0) {
+				setTimeout(function () {
+					if (!_this2.isLoaded) {
+						_this2.setState({
+							imageSource: _this2.props.initialImage
+						});
+					}
+				}, this.props.initialTimeout);
+			} else {
+				this.setState({
+					imageSource: this.props.initialImage
+				});
+			}
+		}
+	}, {
 		key: "componentDidMount",
 		value: function componentDidMount() {
+			this.handleInitialTimeout();
 			this.displayImage = new window.Image();
@@ -58,6 +80,5 @@ this.setDisplayImage({ image: this.props.src, fallbacks: this.props.fallbackImage });
 			if (nextProps.src !== this.props.src) {
+				this.isLoaded = false;
 				if (nextProps.initialImage) {
-					this.setState({
-						imageSource: nextProps.initialImage
-					});
+					this.handleInitialTimeout();
 				}
@@ -79,3 +100,3 @@ this.setDisplayImage({ image: nextProps.src, fallbacks: nextProps.fallbackImage });
 		value: function setDisplayImage(_ref) {
-			var _this2 = this;
+			var _this3 = this;
 
@@ -91,10 +112,11 @@ var image = _ref.image,
 					var updatedFallbacks = imagesArray.slice(2);
-					_this2.setDisplayImage({ image: imagesArray[1], fallbacks: updatedFallbacks });
+					_this3.setDisplayImage({ image: imagesArray[1], fallbacks: updatedFallbacks });
 					return;
 				}
-				_this2.setState({
+				_this3.isLoaded = true;
+				_this3.setState({
 					imageSource: imagesArray[1] || null
 				}, function () {
-					if (_this2.props.onError) {
-						_this2.props.onError(_this2.props.src);
+					if (_this3.props.onError) {
+						_this3.props.onError(_this3.props.src);
 					}
@@ -104,7 +126,8 @@ });
 			this.displayImage.onload = function () {
-				_this2.setState({
+				_this3.isLoaded = true;
+				_this3.setState({
 					imageSource: imagesArray[0]
 				}, function () {
-					if (_this2.props.onLoad) {
-						_this2.props.onLoad(imagesArray[0]);
+					if (_this3.props.onLoad) {
+						_this3.props.onLoad(imagesArray[0]);
 					}
@@ -119,4 +142,4 @@ });
 				}, function () {
-					if (_this2.props.onLoad) {
-						_this2.props.onLoad(imagesArray[0]);
+					if (_this3.props.onLoad) {
+						_this3.props.onLoad(imagesArray[0]);
 					}
@@ -145,3 +168,4 @@ });
 	onLoad: _propTypes2.default.func,
-	onError: _propTypes2.default.func
+	onError: _propTypes2.default.func,
+	initialTimeout: _propTypes2.default.number
 };
@@ -148,0 +172,0 @@

package.json

 {
   "name": "react-image-fallback",
-  "version": "7.1.0",
+  "version": "8.0.0",
   "description": "if your image doesn't exist, fallback onto another provided image.",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -23,2 +23,5 @@ # React Image Fallback
 
+#### `initialTimeout`
+timeout in millisecond before to show initialImage. Default is null which should initialImage immediately
+
 #### `onLoad`
@@ -25,0 +28,0 @@ A callback called if initial image loads successfully, will be called with successful image url.

src/index.js

@@ -9,8 +9,28 @@ import PropTypes from "prop-types"
 		this.state = {
-			imageSource: props.initialImage
+			imageSource: null
 		};
 		this.setDisplayImage = this.setDisplayImage.bind(this);
+		this.handleInitialTimeout = this.handleInitialTimeout.bind(this);
+		this.isLoaded = false;
 	}
 
+	handleInitialTimeout() {
+		if (this.props.initialTimeout && this.props.initialTimeout > 0) {
+			setTimeout(() => {
+				if (!this.isLoaded) {
+					this.setState({
+						imageSource: this.props.initialImage
+					})
+				}
+			}, this.props.initialTimeout);
+		}
+		else {
+			this.setState({
+				imageSource: this.props.initialImage
+			});
+		}
+	}
+
 	componentDidMount() {
+		this.handleInitialTimeout();
 		this.displayImage = new window.Image();
@@ -22,6 +42,5 @@ this.setDisplayImage({ image: this.props.src, fallbacks: this.props.fallbackImage });
 		if (nextProps.src !== this.props.src) {
+			this.isLoaded = false;
 			if (nextProps.initialImage) {
-				this.setState({
-					imageSource: nextProps.initialImage
-				});
+				this.handleInitialTimeout();
 			}
@@ -48,2 +67,3 @@ this.setDisplayImage({ image: nextProps.src, fallbacks: nextProps.fallbackImage });
 			}
+			this.isLoaded = true;
 			this.setState({
@@ -58,2 +78,3 @@ imageSource: imagesArray[1] || null
 		this.displayImage.onload = () => {
+			this.isLoaded = true;
 			this.setState({
@@ -98,3 +119,4 @@ imageSource: imagesArray[0]
 	onLoad: PropTypes.func,
-	onError: PropTypes.func
+	onError: PropTypes.func,
+	initialTimeout: PropTypes.number
 };
@@ -101,0 +123,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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

13766

increased by10.46%

Lines of code

254

increased by20.95%

Number of lines in readme file

65

increased by4.84%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes