From 8b1b9a8467c16c26f0f331027b979cfbef932966 Mon Sep 17 00:00:00 2001
From: "Petr Mifek (EDM)" <petr@edmstudio.com>
Date: Wed, 6 Nov 2019 10:57:33 +0100
Subject: [PATCH 1/3] Handle also immediate failure when setting the initial
 image

---
 src/cropper.vue | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/cropper.vue b/src/cropper.vue
index e81633f..94358ff 100644
--- a/src/cropper.vue
+++ b/src/cropper.vue
@@ -659,9 +659,19 @@ export default {
         return
       }
       this.currentIsInitial = true
-      if (u.imageLoaded(img)) {
-        // this.emitEvent(events.INITIAL_IMAGE_LOADED_EVENT)
-        this._onload(img, +img.dataset['exifOrientation'], true)
+
+      let onError = () => {
+        this._setPlaceholders()
+        this.loading = false
+      }
+      this.loading = true
+      if (img.complete) {
+        if (u.imageLoaded(img)) {
+          // this.emitEvent(events.INITIAL_IMAGE_LOADED_EVENT)
+          this._onload(img, +img.dataset['exifOrientation'], true)
+        } else {
+          onError()
+        }
       } else {
         this.loading = true
         img.onload = () => {
@@ -670,7 +680,7 @@ export default {
         }
 
         img.onerror = () => {
-          this._setPlaceholders()
+          onError()
         }
       }
     },

From 27064354688a35ed02dc3269c609c7ebe93ba045 Mon Sep 17 00:00:00 2001
From: "Petr Mifek (EDM)" <petr@edmstudio.com>
Date: Wed, 6 Nov 2019 10:58:54 +0100
Subject: [PATCH 2/3] Handling for loading events based on setters instead of
 watchers to ensure events are sent when changes are immediate.

---
 src/cropper.vue | 29 ++++++++++++++++++++---------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/cropper.vue b/src/cropper.vue
index 94358ff..f8605c2 100644
--- a/src/cropper.vue
+++ b/src/cropper.vue
@@ -117,7 +117,7 @@ export default {
       imageSet: false,
       currentPointerCoord: null,
       currentIsInitial: false,
-      loading: false,
+      _loading: false,
       realWidth: 0, // only for when autoSizing is on
       realHeight: 0, // only for when autoSizing is on
       chosenFile: null,
@@ -152,6 +152,25 @@ export default {
         bottom: '10px'
       }
     },
+
+    loading: {
+      get: function() {
+        return this._loading
+      },
+      set: function(newValue) {
+        console.log("Set loading", newValue)
+        let oldValue = this._loading
+        this._loading = newValue
+        if (oldValue != newValue) {
+          if (this.passive) return
+          if (newValue) {
+            this.emitEvent(events.LOADING_START_EVENT)
+          } else {
+            this.emitEvent(events.LOADING_END_EVENT)
+          }
+        }
+      }
+    }
   },
 
   mounted () {
@@ -299,14 +318,6 @@ export default {
         this.$nextTick(this._draw)
       }
     },
-    loading (val) {
-      if (this.passive) return
-      if (val) {
-        this.emitEvent(events.LOADING_START_EVENT)
-      } else {
-        this.emitEvent(events.LOADING_END_EVENT)
-      }
-    },
     autoSizing (val) {
       this.useAutoSizing = !!(this.autoSizing && this.$refs.wrapper && getComputedStyle)
       if (val) {

From 0b8a0401e4f530e86383382af339c9c2323427a5 Mon Sep 17 00:00:00 2001
From: "Petr Mifek (EDM)" <petr@edmstudio.com>
Date: Wed, 6 Nov 2019 12:31:47 +0100
Subject: [PATCH 3/3] Remove debug log.

---
 src/cropper.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/cropper.vue b/src/cropper.vue
index f8605c2..f2a13a2 100644
--- a/src/cropper.vue
+++ b/src/cropper.vue
@@ -158,7 +158,6 @@ export default {
         return this._loading
       },
       set: function(newValue) {
-        console.log("Set loading", newValue)
         let oldValue = this._loading
         this._loading = newValue
         if (oldValue != newValue) {