Fix problem when multiple images have the same src

Fix #12
themyth92 · Jun 30, 2017 · 01699ee · 01699ee
1 parent 011f216
commit 01699ee
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 17 deletions.
diff --git a/demo/app.component.ts b/demo/app.component.ts
@@ -44,7 +44,7 @@ export class AppComponent {
   }
 
   open(index: number): void {
-    this._subscription = this._lightboxEvent.lightboxEvent$.subscribe(event => this._onReceivedEvent(event));
+    this._subscription = this._lightboxEvent.lightboxEvent$.subscribe((event: IEvent) => this._onReceivedEvent(event));
 
     // override the default config
     this._lightbox.open(this._albums, index, { wrapAround: true, showImageNumberLabel: true });

diff --git a/src/lightbox.component.spec.ts b/src/lightbox.component.spec.ts
@@ -72,7 +72,6 @@ describe('[ Unit - LightboxComponent ]', () => {
       fixture.componentInstance.options.disableKeyboardNav = false;
       fixture.componentInstance.ngOnDestroy();
       expect(fixture.componentInstance['_event'].keyup).toHaveBeenCalledTimes(1);
-      expect(fixture.componentInstance['_event'].load).toHaveBeenCalledTimes(1);
       expect(fixture.componentInstance['_event'].subscription.unsubscribe).toHaveBeenCalledTimes(1);
     });
 

diff --git a/src/lightbox.component.ts b/src/lightbox.component.ts
@@ -135,11 +135,6 @@ export class LightboxComponent implements AfterViewInit, OnDestroy {
       this._disableKeyboardNav();
     }
 
-    if (this._event.load) {
-      // unbind all the event
-      this._event.load();
-    }
-
     this._event.subscription.unsubscribe();
   }
 
@@ -201,11 +196,12 @@ export class LightboxComponent implements AfterViewInit, OnDestroy {
   }
 
   private _registerImageLoadingEvent(): void {
-    // start to register the event and
-    // be ready for callback
-    this._event.load = this._rendererRef.listen(this._imageElem.nativeElement, 'load', () => {
+    const preloader = new Image();
+
+    preloader.onload = () => {
       this._onLoadImageSuccess();
-    });
+    }
+    preloader.src = this.album[this.currentImageIndex].src;
   }
 
   /**
@@ -386,12 +382,6 @@ export class LightboxComponent implements AfterViewInit, OnDestroy {
 
   private _changeImage(newIndex: number): void {
     this.currentImageIndex = newIndex;
-
-    // unbind load event from image first before bind it again
-    if (this._event.load) {
-      this._event.load();
-    }
-
     this._hideImage();
     this._registerImageLoadingEvent();
     this._lightboxEvent.broadcastLightboxEvent({ id: LIGHTBOX_EVENT.CHANGE_PAGE, data: newIndex });