fix: do not add drift-loading class after first hover (#317)

Author: sherwinski

src/js/ZoomPane.js

@@ -182,10 +182,13 @@ export default class ZoomPane {
     this.isShowing = true;
 
     addClasses(this.el, this.openClasses);
-    addClasses(this.el, this.loadingClasses);
 
-    this.imgEl.addEventListener("load", this._handleLoad, false);
-    this._setImageURL(imageURL);
+    if (this.imgEl.getAttribute("src") != imageURL) {
+      addClasses(this.el, this.loadingClasses);
+      this.imgEl.addEventListener("load", this._handleLoad, false);
+      this._setImageURL(imageURL);
+    }
+
     this._setImageSize(triggerWidth, triggerHeight);
 
     if (this._isInline) {

test/testZoomPane.js

@@ -77,4 +77,23 @@ describe("ZoomPane", () => {
 
     expect(zoomPane.imgEl.style.width).toBe(`${triggerWidth * zoomPane.settings.zoomFactor}px`);
   });
+
+  it("does not add the drift-loading class after first hover", () => {
+    const zoomPane = new ZoomPane(zoomPaneOptions());
+    const testSrc = "http://assets.imgix.net/unsplash/pretty2.jpg";
+    const triggerWidth = 400;
+
+    zoomPane.show(testSrc, triggerWidth);
+    expect(zoomPane.el.classList.toString()).toContain("drift-loading");
+
+    zoomPane.hide();
+    setTimeout(function() {
+      expect(zoomPane.el.classList.toString()).not.toContain("drift-loading");
+    }, 1000);
+
+    zoomPane.show(testSrc, triggerWidth);
+    setTimeout(function() {
+      expect(zoomPane.el.classList.toString()).not.toContain("drift-loading");
+    }, 1000);
+  });
 });