diff --git a/packages/image/index.js b/packages/image/index.js
index 27166dc25..1a7d40006 100644
--- a/packages/image/index.js
+++ b/packages/image/index.js
@@ -43,12 +43,42 @@ export default sfc({
}
},
+ created() {
+ const { $Lazyload } = this;
+
+ if ($Lazyload) {
+ $Lazyload.$on('loaded', this.onLazyLoaded);
+ $Lazyload.$on('error', this.onLazyLoadError);
+ }
+ },
+
+ beforeDestroy() {
+ const { $Lazyload } = this;
+
+ if ($Lazyload) {
+ $Lazyload.$off('loaded', this.onLazyLoaded);
+ $Lazyload.$off('error', this.onLazyLoadError);
+ }
+ },
+
methods: {
onLoad(event) {
this.loading = false;
this.$emit('load', event);
},
+ onLazyLoaded({ el }) {
+ if (el === this.$refs.image && this.loading) {
+ this.onLoad();
+ }
+ },
+
+ onLazyLoadError({ el }) {
+ if (el === this.$refs.image && !this.error) {
+ this.onError();
+ }
+ },
+
onError(event) {
this.error = true;
this.loading = false;
@@ -85,10 +115,6 @@ export default sfc({
},
style: {
objectFit: this.fit
- },
- on: {
- load: this.onLoad,
- error: this.onError
}
};
@@ -97,10 +123,12 @@ export default sfc({
}
if (this.lazyLoad) {
- return ;
+ return
;
}
- return
;
+ return (
+
+ );
}
},
diff --git a/packages/image/test/__snapshots__/index.spec.js.snap b/packages/image/test/__snapshots__/index.spec.js.snap
index c6603965a..cfa3f8b71 100644
--- a/packages/image/test/__snapshots__/index.spec.js.snap
+++ b/packages/image/test/__snapshots__/index.spec.js.snap
@@ -7,6 +7,15 @@ exports[`lazy load 1`] = `
`;
+exports[`lazy-load error event 1`] = `
+