@fonixtree/magic-design 2.0.29 → 2.0.31

package/es/common/ImageLazy/index.js

@@ -100,9 +100,11 @@ function (_super) {
 
     this.intersectionObserver = new IntersectionObserver(function (entries) {
       if (entries[0].isIntersecting) {
-        _this.setState({
-          show: true
-        });
+        if (!_this.state.show) {
+          _this.setState({
+            show: true
+          });
+        }
       }
     }, {
       root: (_a = this.props) === null || _a === void 0 ? void 0 : _a.rootContainer(),
@@ -120,14 +122,13 @@ function (_super) {
     var _this = this;
 
     var _a = this.props,
-        root = _a.root,
         _b = _a.lazy,
         lazy = _b === void 0 ? true : _b,
         src = _a.src,
         onLoadFunc = _a.onLoadFunc,
         style = _a.style,
         className = _a.className,
-        rest = __rest(_a, ["root", "lazy", "src", "onLoadFunc", "style", "className"]);
+        rest = __rest(_a, ["lazy", "src", "onLoadFunc", "style", "className"]);
 
     var show = this.state.show;
     var isShow = lazy ? show : true;

package/es/composite-comp/bol/components/Carousel/index.js

@@ -15,6 +15,8 @@ var _defaultJSON = require("./defaultJSON");
 
 var _compositeDecorator = _interopRequireDefault(require("../../../../decorator/compositeDecorator"));
 
+var _decorator = require("../../../../decorator");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -65,21 +67,43 @@ function (_super) {
   __extends(Carousel, _super);
 
   function Carousel() {
-    return _super !== null && _super.apply(this, arguments) || this;
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {
+      lazyShow: false
+    };
+    _this.carouselRef = /*#__PURE__*/_react["default"].createRef();
+    _this.intersectionObserver = null;
+    return _this;
   }
 
+  Carousel.prototype.componentDidMount = function () {};
+
+  Carousel.prototype.componentWillUnmount = function () {};
+
   Carousel.prototype.render = function () {
     var nodeData = this.props.nodeData;
-    return /*#__PURE__*/_react["default"].createElement("div", null, window.magicDesign.device === 'pc' ? /*#__PURE__*/_react["default"].createElement(_pc["default"], {
+    var lazyShow = this.state.lazyShow;
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      ref: this.carouselRef,
+      style: {
+        height: lazyShow ? 'auto' : 300
+      }
+    }, lazyShow && (window.magicDesign.device === 'pc' ? /*#__PURE__*/_react["default"].createElement(_pc["default"], {
       data: nodeData
     }) : /*#__PURE__*/_react["default"].createElement(_mobile["default"], {
       data: nodeData
-    }));
+    })));
   };
 
   Carousel.defaultProps = {};
   Carousel.type = 'CAROUSEL';
   Carousel.getDefaultJSON = _defaultJSON.getDefaultJSON;
+
+  __decorate([(0, _decorator.lazy)('carouselRef')], Carousel.prototype, "componentDidMount", null);
+
+  __decorate([_decorator.lazyDestroy], Carousel.prototype, "componentWillUnmount", null);
+
   Carousel = __decorate([_compositeDecorator["default"]], Carousel);
   return Carousel;
 }(_react.Component);

package/es/composite-comp/bol/components/Carousel/mobile/index.js

@@ -73,24 +73,13 @@ var __assign = void 0 && (void 0).__assign || function () {
   return __assign.apply(this, arguments);
 };
 
-var MOBILE_IMG_SIZE = {
-  1: {
-    maxH: 282
-  },
-  2: {
-    maxH: 137
-  },
-  3: {
-    maxH: 87
-  },
-  4: {
-    maxH: 66
-  },
-  5: {
-    maxH: 50
-  }
-};
-
+// const MOBILE_IMG_SIZE = {
+//   1: { maxH: 282 },
+//   2: { maxH: 137 },
+//   3: { maxH: 87 },
+//   4: { maxH: 66 },
+//   5: { maxH: 50 },
+// };
 var CarouselMobile =
 /** @class */
 function (_super) {
@@ -247,7 +236,8 @@ function (_super) {
         GAData: __assign(__assign({}, GAData), {
           groupId: item.id,
           groupName: (0, _ConfigPanel.getSecondConfigName)(data, item.id)
-        })
+        }),
+        notNeedLazy: true
       })), layout === 'layout2' && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, item.title.open && /*#__PURE__*/_react["default"].createElement("div", {
         className: "title"
       }, /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
@@ -272,7 +262,8 @@ function (_super) {
           groupId: item.id,
           groupName: (0, _ConfigPanel.getSecondConfigName)(data, item.id)
         }),
-        maxHeight: 20
+        maxHeight: 20,
+        notNeedLazy: true
       }), item.buttonTag.open && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
         data: item.buttonTag,
         GAData: __assign(__assign({}, GAData), {

package/es/composite-comp/bol/components/Carousel/pc/index.js

@@ -280,7 +280,8 @@ function (_super) {
         }),
         maxHeight: item.image.content.pcImgSrc ? 'unset' : PC_IMG_SIZE[floorColNum].defH,
         minHeight: PC_IMG_SIZE[floorColNum].minH,
-        minWidth: PC_IMG_SIZE[floorColNum].minW
+        minWidth: PC_IMG_SIZE[floorColNum].minW,
+        notNeedLazy: true
       })), layout === 'layout2' && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, item.title.open && !((0, _coreUtil.isPc)() && item.title.pcText === '') && /*#__PURE__*/_react["default"].createElement("div", {
         className: "title"
       }, /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
@@ -305,7 +306,8 @@ function (_super) {
           groupId: item.id,
           groupName: (0, _ConfigPanel.getSecondConfigName)(data, item.id)
         }),
-        maxHeight: 30
+        maxHeight: 30,
+        notNeedLazy: true
       }), item.buttonTag.open && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
         data: item.buttonTag,
         GAData: __assign(__assign({}, GAData), {

package/es/decorator/index.js

@@ -9,6 +9,18 @@ Object.defineProperty(exports, "compositeDecorator", {
     return _compositeDecorator["default"];
   }
 });
+Object.defineProperty(exports, "lazy", {
+  enumerable: true,
+  get: function get() {
+    return _lazyLoadDecorator.lazy;
+  }
+});
+Object.defineProperty(exports, "lazyDestroy", {
+  enumerable: true,
+  get: function get() {
+    return _lazyLoadDecorator.lazyDestroy;
+  }
+});
 Object.defineProperty(exports, "metaDecorator", {
   enumerable: true,
   get: function get() {
@@ -28,4 +40,6 @@ var _metaDecorator = _interopRequireDefault(require("./metaDecorator"));
 
 var _updateConfigDecorator = _interopRequireDefault(require("./updateConfigDecorator"));
 
+var _lazyLoadDecorator = require("./lazyLoadDecorator");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/es/decorator/lazyLoadDecorator.js

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.lazy = lazy;
+exports.lazyDestroy = void 0;
+
+/**
+ * 组件懒加载
+ * @param refName 所需懒加载的组件ref名
+ * @returns
+ */
+function lazy(refName) {
+  return function (target, name, descriptor) {
+    var fn = descriptor.value;
+
+    descriptor.value = function () {
+      var _this = this;
+
+      var rest = [];
+
+      for (var _i = 0; _i < arguments.length; _i++) {
+        rest[_i] = arguments[_i];
+      }
+
+      this.intersectionObserver = new IntersectionObserver(function (entries) {
+        if (entries[0].isIntersecting) {
+          if (!_this.state.lazyShow) {
+            _this.setState({
+              lazyShow: true
+            });
+          }
+        }
+      }, {
+        root: null,
+        // threshold: 0.8,
+        rootMargin: '0px 0px 100px 0px'
+      });
+      this.intersectionObserver.observe(this[refName].current);
+      /** 监听状态变化 */
+
+      this._intersectionObserverDestroy = function () {
+        _this.intersectionObserver.disconnect(_this[refName].current);
+      };
+
+      fn.apply(this, rest);
+    };
+  };
+}
+/**
+ * 销毁lazy监听
+ */
+
+
+var lazyDestroy = function lazyDestroy(target, name, descriptor) {
+  var fn = descriptor.value;
+
+  descriptor.value = function () {
+    var rest = [];
+
+    for (var _i = 0; _i < arguments.length; _i++) {
+      rest[_i] = arguments[_i];
+    }
+
+    if (this._intersectionObserverDestroy) {
+      this._intersectionObserverDestroy();
+    } // this._intersectionObserverDestroy && this._intersectionObserverDestroy();
+
+
+    fn.apply(this, rest);
+  };
+};
+
+exports.lazyDestroy = lazyDestroy;

package/es/meta-comp/components/Image/index.js

@@ -21,6 +21,8 @@ var _commonUtil = require("../../../utils/commonUtil");
 
 var _decorator = require("../../../decorator");
 
+var _ImageLazy = _interopRequireDefault(require("../../../common/ImageLazy"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
@@ -165,7 +167,8 @@ function (_super) {
     var _c = this.props,
         data = _c.data,
         isBackground = _c.isBackground,
-        hoverState = _c.hoverState;
+        hoverState = _c.hoverState,
+        notNeedLazy = _c.notNeedLazy;
     var hoverImgSrc = this.state.hoverImgSrc; // const { hoverSrc } = this.state;
     // console.log('--metaImage ', this.props);
 
@@ -190,7 +193,7 @@ function (_super) {
       onClick: function onClick() {
         (0, _coreUtil.clickUrl)(data.content.clickUrl);
       }
-    }, srcImg && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("img", {
+    }, srcImg && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, notNeedLazy ? /*#__PURE__*/_react["default"].createElement("img", {
       ref: this.imgRef,
       onLoad: function onLoad() {
         var scale = _this.imgRef.current.clientWidth / 600;
@@ -203,6 +206,18 @@ function (_super) {
       onMouseLeave: this.mouseLeaveImg,
       src: srcImg,
       style: (0, _commonUtil.pxToRem)(this.getStyle())
+    }) : /*#__PURE__*/_react["default"].createElement(_ImageLazy["default"], {
+      onLoadFunc: function onLoadFunc(clientWidth) {
+        var scale = clientWidth / 600;
+
+        _this.setState({
+          scale: scale
+        });
+      },
+      onMouseEnter: this.mouseEnterImg,
+      onMouseLeave: this.mouseLeaveImg,
+      src: srcImg,
+      style: (0, _commonUtil.pxToRem)(this.getStyle())
     }), areas && areas.length > 0 && areas.map(function (v, i) {
       var aStyle = {
         position: 'absolute',
@@ -230,7 +245,8 @@ function (_super) {
     isBackground: false,
     hoverState: false,
     limitWidthHeight: false,
-    scale: 1
+    scale: 1,
+    notNeedLazy: false
   };
   Image = __decorate([_decorator.metaDecorator], Image);
   return Image;

package/lib/common/ImageLazy/index.js

@@ -100,9 +100,11 @@ function (_super) {
 
     this.intersectionObserver = new IntersectionObserver(function (entries) {
       if (entries[0].isIntersecting) {
-        _this.setState({
-          show: true
-        });
+        if (!_this.state.show) {
+          _this.setState({
+            show: true
+          });
+        }
       }
     }, {
       root: (_a = this.props) === null || _a === void 0 ? void 0 : _a.rootContainer(),
@@ -120,14 +122,13 @@ function (_super) {
     var _this = this;
 
     var _a = this.props,
-        root = _a.root,
         _b = _a.lazy,
         lazy = _b === void 0 ? true : _b,
         src = _a.src,
         onLoadFunc = _a.onLoadFunc,
         style = _a.style,
         className = _a.className,
-        rest = __rest(_a, ["root", "lazy", "src", "onLoadFunc", "style", "className"]);
+        rest = __rest(_a, ["lazy", "src", "onLoadFunc", "style", "className"]);
 
     var show = this.state.show;
     var isShow = lazy ? show : true;

package/lib/composite-comp/bol/components/Carousel/index.js

@@ -15,6 +15,8 @@ var _defaultJSON = require("./defaultJSON");
 
 var _compositeDecorator = _interopRequireDefault(require("../../../../decorator/compositeDecorator"));
 
+var _decorator = require("../../../../decorator");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -65,21 +67,43 @@ function (_super) {
   __extends(Carousel, _super);
 
   function Carousel() {
-    return _super !== null && _super.apply(this, arguments) || this;
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {
+      lazyShow: false
+    };
+    _this.carouselRef = /*#__PURE__*/_react["default"].createRef();
+    _this.intersectionObserver = null;
+    return _this;
   }
 
+  Carousel.prototype.componentDidMount = function () {};
+
+  Carousel.prototype.componentWillUnmount = function () {};
+
   Carousel.prototype.render = function () {
     var nodeData = this.props.nodeData;
-    return /*#__PURE__*/_react["default"].createElement("div", null, window.magicDesign.device === 'pc' ? /*#__PURE__*/_react["default"].createElement(_pc["default"], {
+    var lazyShow = this.state.lazyShow;
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      ref: this.carouselRef,
+      style: {
+        height: lazyShow ? 'auto' : 300
+      }
+    }, lazyShow && (window.magicDesign.device === 'pc' ? /*#__PURE__*/_react["default"].createElement(_pc["default"], {
       data: nodeData
     }) : /*#__PURE__*/_react["default"].createElement(_mobile["default"], {
       data: nodeData
-    }));
+    })));
   };
 
   Carousel.defaultProps = {};
   Carousel.type = 'CAROUSEL';
   Carousel.getDefaultJSON = _defaultJSON.getDefaultJSON;
+
+  __decorate([(0, _decorator.lazy)('carouselRef')], Carousel.prototype, "componentDidMount", null);
+
+  __decorate([_decorator.lazyDestroy], Carousel.prototype, "componentWillUnmount", null);
+
   Carousel = __decorate([_compositeDecorator["default"]], Carousel);
   return Carousel;
 }(_react.Component);

package/lib/composite-comp/bol/components/Carousel/mobile/index.js

@@ -73,24 +73,13 @@ var __assign = void 0 && (void 0).__assign || function () {
   return __assign.apply(this, arguments);
 };
 
-var MOBILE_IMG_SIZE = {
-  1: {
-    maxH: 282
-  },
-  2: {
-    maxH: 137
-  },
-  3: {
-    maxH: 87
-  },
-  4: {
-    maxH: 66
-  },
-  5: {
-    maxH: 50
-  }
-};
-
+// const MOBILE_IMG_SIZE = {
+//   1: { maxH: 282 },
+//   2: { maxH: 137 },
+//   3: { maxH: 87 },
+//   4: { maxH: 66 },
+//   5: { maxH: 50 },
+// };
 var CarouselMobile =
 /** @class */
 function (_super) {
@@ -247,7 +236,8 @@ function (_super) {
         GAData: __assign(__assign({}, GAData), {
           groupId: item.id,
           groupName: (0, _ConfigPanel.getSecondConfigName)(data, item.id)
-        })
+        }),
+        notNeedLazy: true
       })), layout === 'layout2' && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, item.title.open && /*#__PURE__*/_react["default"].createElement("div", {
         className: "title"
       }, /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
@@ -272,7 +262,8 @@ function (_super) {
           groupId: item.id,
           groupName: (0, _ConfigPanel.getSecondConfigName)(data, item.id)
         }),
-        maxHeight: 20
+        maxHeight: 20,
+        notNeedLazy: true
       }), item.buttonTag.open && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
         data: item.buttonTag,
         GAData: __assign(__assign({}, GAData), {

package/lib/composite-comp/bol/components/Carousel/pc/index.js

@@ -280,7 +280,8 @@ function (_super) {
         }),
         maxHeight: item.image.content.pcImgSrc ? 'unset' : PC_IMG_SIZE[floorColNum].defH,
         minHeight: PC_IMG_SIZE[floorColNum].minH,
-        minWidth: PC_IMG_SIZE[floorColNum].minW
+        minWidth: PC_IMG_SIZE[floorColNum].minW,
+        notNeedLazy: true
       })), layout === 'layout2' && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, item.title.open && !((0, _coreUtil.isPc)() && item.title.pcText === '') && /*#__PURE__*/_react["default"].createElement("div", {
         className: "title"
       }, /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
@@ -305,7 +306,8 @@ function (_super) {
           groupId: item.id,
           groupName: (0, _ConfigPanel.getSecondConfigName)(data, item.id)
         }),
-        maxHeight: 30
+        maxHeight: 30,
+        notNeedLazy: true
       }), item.buttonTag.open && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
         data: item.buttonTag,
         GAData: __assign(__assign({}, GAData), {

package/lib/decorator/index.js

@@ -9,6 +9,18 @@ Object.defineProperty(exports, "compositeDecorator", {
     return _compositeDecorator["default"];
   }
 });
+Object.defineProperty(exports, "lazy", {
+  enumerable: true,
+  get: function get() {
+    return _lazyLoadDecorator.lazy;
+  }
+});
+Object.defineProperty(exports, "lazyDestroy", {
+  enumerable: true,
+  get: function get() {
+    return _lazyLoadDecorator.lazyDestroy;
+  }
+});
 Object.defineProperty(exports, "metaDecorator", {
   enumerable: true,
   get: function get() {
@@ -28,4 +40,6 @@ var _metaDecorator = _interopRequireDefault(require("./metaDecorator"));
 
 var _updateConfigDecorator = _interopRequireDefault(require("./updateConfigDecorator"));
 
+var _lazyLoadDecorator = require("./lazyLoadDecorator");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/decorator/lazyLoadDecorator.js

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.lazy = lazy;
+exports.lazyDestroy = void 0;
+
+/**
+ * 组件懒加载
+ * @param refName 所需懒加载的组件ref名
+ * @returns
+ */
+function lazy(refName) {
+  return function (target, name, descriptor) {
+    var fn = descriptor.value;
+
+    descriptor.value = function () {
+      var _this = this;
+
+      var rest = [];
+
+      for (var _i = 0; _i < arguments.length; _i++) {
+        rest[_i] = arguments[_i];
+      }
+
+      this.intersectionObserver = new IntersectionObserver(function (entries) {
+        if (entries[0].isIntersecting) {
+          if (!_this.state.lazyShow) {
+            _this.setState({
+              lazyShow: true
+            });
+          }
+        }
+      }, {
+        root: null,
+        // threshold: 0.8,
+        rootMargin: '0px 0px 100px 0px'
+      });
+      this.intersectionObserver.observe(this[refName].current);
+      /** 监听状态变化 */
+
+      this._intersectionObserverDestroy = function () {
+        _this.intersectionObserver.disconnect(_this[refName].current);
+      };
+
+      fn.apply(this, rest);
+    };
+  };
+}
+/**
+ * 销毁lazy监听
+ */
+
+
+var lazyDestroy = function lazyDestroy(target, name, descriptor) {
+  var fn = descriptor.value;
+
+  descriptor.value = function () {
+    var rest = [];
+
+    for (var _i = 0; _i < arguments.length; _i++) {
+      rest[_i] = arguments[_i];
+    }
+
+    if (this._intersectionObserverDestroy) {
+      this._intersectionObserverDestroy();
+    } // this._intersectionObserverDestroy && this._intersectionObserverDestroy();
+
+
+    fn.apply(this, rest);
+  };
+};
+
+exports.lazyDestroy = lazyDestroy;

package/lib/meta-comp/components/Image/index.js

@@ -21,6 +21,8 @@ var _commonUtil = require("../../../utils/commonUtil");
 
 var _decorator = require("../../../decorator");
 
+var _ImageLazy = _interopRequireDefault(require("../../../common/ImageLazy"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
@@ -165,7 +167,8 @@ function (_super) {
     var _c = this.props,
         data = _c.data,
         isBackground = _c.isBackground,
-        hoverState = _c.hoverState;
+        hoverState = _c.hoverState,
+        notNeedLazy = _c.notNeedLazy;
     var hoverImgSrc = this.state.hoverImgSrc; // const { hoverSrc } = this.state;
     // console.log('--metaImage ', this.props);
 
@@ -190,7 +193,7 @@ function (_super) {
       onClick: function onClick() {
         (0, _coreUtil.clickUrl)(data.content.clickUrl);
       }
-    }, srcImg && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("img", {
+    }, srcImg && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, notNeedLazy ? /*#__PURE__*/_react["default"].createElement("img", {
       ref: this.imgRef,
       onLoad: function onLoad() {
         var scale = _this.imgRef.current.clientWidth / 600;
@@ -203,6 +206,18 @@ function (_super) {
       onMouseLeave: this.mouseLeaveImg,
       src: srcImg,
       style: (0, _commonUtil.pxToRem)(this.getStyle())
+    }) : /*#__PURE__*/_react["default"].createElement(_ImageLazy["default"], {
+      onLoadFunc: function onLoadFunc(clientWidth) {
+        var scale = clientWidth / 600;
+
+        _this.setState({
+          scale: scale
+        });
+      },
+      onMouseEnter: this.mouseEnterImg,
+      onMouseLeave: this.mouseLeaveImg,
+      src: srcImg,
+      style: (0, _commonUtil.pxToRem)(this.getStyle())
     }), areas && areas.length > 0 && areas.map(function (v, i) {
       var aStyle = {
         position: 'absolute',
@@ -230,7 +245,8 @@ function (_super) {
     isBackground: false,
     hoverState: false,
     limitWidthHeight: false,
-    scale: 1
+    scale: 1,
+    notNeedLazy: false
   };
   Image = __decorate([_decorator.metaDecorator], Image);
   return Image;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fonixtree/magic-design",
   "author": "Cylon Team",
-  "version": "2.0.29",
+  "version": "2.0.31",
   "description": "Magic Design",
   "license": "MIT",
   "module": "es/index.js",