refactor: improve image loading code

nzbin · May 27, 2019 · 593a368 · 593a368
1 parent 10bb79d
commit 593a368
Showing 1 changed file with 21 additions and 16 deletions.
diff --git a/src/js/core.js b/src/js/core.js
@@ -736,37 +736,42 @@ Magnify.prototype = {
       this.isRotated
     );
 
-    // Remove class must when image setting end
-    this.$stage.removeClass('stage-ready');
-    this.$image.removeClass('image-ready');
-
-    // loader end
-    this.$magnify.find('.magnify-loader').remove();
+    // Just execute before image loaded
+    if(!this.imgLoaded){
+      // loader end
+      this.$magnify.find('.magnify-loader').remove();
+
+      // Remove class must when image setting end
+      this.$stage.removeClass('stage-ready');
+      this.$image.removeClass('image-ready');
+
+      // Add image init animation
+      if (this.options.initAnimation && !this.options.progressiveLoading) {
+        $image.fadeIn();
+      }
 
-    // Add image init animation
-    if (this.options.initAnimation && !this.options.progressiveLoading) {
-      $image.fadeIn();
+      this.imgLoaded = true;
     }
 
   },
   loadImg: function (imgSrc, fn, err) {
 
     var self = this;
 
-    var loaderHTML = '<div class="magnify-loader"></div>';
+    // Reset image
+    this.$image.removeAttr('style').attr('src', '');
+    this.isRotated = false;
+    this.rotateAngle = 0;
+
+    this.imgLoaded = false;
 
     // loader start
-    this.$magnify.append(loaderHTML);
+    this.$magnify.append('<div class="magnify-loader"></div>');
 
     // Add class before image loaded
     this.$stage.addClass('stage-ready');
     this.$image.addClass('image-ready');
 
-    // Reset image
-    this.$image.removeAttr('style').attr('src', '');
-    this.isRotated = false;
-    this.rotateAngle = 0;
-
     if (this.options.initAnimation && !this.options.progressiveLoading) {
       this.$image.hide();
     }