enhance rendering concept by preloading thumbnail image size and scre…

…en optimal image size. remove polyfill, background-image solution does not need that. #14

src/app/gallery/gallery.component.ts

@@ -68,6 +68,7 @@ export class GalleryComponent implements OnInit {
 
                     this.images.forEach((image) => {
                         image['loaded'] = false
+                        image['viewerImageLoaded'] = false
                         image['srcAfterFocus'] = ''
                     })
                     // initial rendering

src/app/viewer/viewer.component.css

@@ -21,16 +21,18 @@
     right: 0px;
 }
 
-
-.imageContainer .image {
-    display: none;
-    object-fit: contain;
-    font-family: 'object-fit: contain;'
+.imageContainer .image,
+.imageContainer .preloading-image
+{
+    visibility: hidden;
 }
 
 .imageContainer .image.active {
     position: absolute;
-    display: block;
+    visibility: visible;
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: center;
     margin: auto auto;
     left: 0;
     right: 0;

src/app/viewer/viewer.component.html

@@ -21,12 +21,18 @@
 
     <div class="imageContainer" (click)="showNavigationArrows()" (swipeleft)="navigate(1, $event)"
          (swiperight)="navigate(-1, $event)" (pan)="pan($event)">
-        <img *ngFor='let img of images; let j = index'
+        <div *ngFor='let img of images; let j = index'
              class="image"
              [class.active]="img['active']"
              [@imageTransition]="img['transition']"
-             [src]="img['active'] ? img[categorySelected]['path'] : img['preview_xxs']['path']"
-             [style.left]="transform"/>
+             [style.background-image]="img['viewerImageLoaded'] ? 'url('+img[categorySelected]['path']+')' : Math.abs(currentIdx-j) <=1 ? 'url('+img['preview_xxs']['path']+')' : ''"
+             [style.left]="transform">
+        </div>
+
+        <img *ngFor='let img of images; let j = index'
+             class="preloading-image"
+             (load)="imageLoaded(img)"
+             src="{{ Math.abs(currentIdx-j) <=1 ? img[categorySelected]['path'] : ''}}"/>
     </div>
 
 </div>

src/app/viewer/viewer.component.ts

@@ -82,6 +82,7 @@ export class ViewerComponent {
     private qualitySelected: string = 'auto'
     private categorySelected: string = 'preview_xxs'
     private transform: string
+    private Math: Math
 
     constructor(private ImageService: ImageService) {
         ImageService.imagesUpdated$.subscribe(
@@ -100,6 +101,7 @@ export class ViewerComponent {
             showViewer => {
                 this.showViewer = showViewer
             })
+        this.Math = Math
     }
 
     public get leftArrowActive(): boolean {
@@ -116,6 +118,10 @@ export class ViewerComponent {
     }
 
     public onResize() {
+        this.images.forEach((image) => {
+            image['viewerImageLoaded'] = false
+            image['active'] = false
+        })
         this.updateImage()
     }
 
@@ -128,6 +134,10 @@ export class ViewerComponent {
         this.updateImage()
     }
 
+    public imageLoaded(image) {
+        image['viewerImageLoaded'] = true
+    }
+
     /**
      * direction (-1: left, 1: right)
      * swipe (user swiped)
@@ -172,11 +182,10 @@ export class ViewerComponent {
     }
 
     private updateImage() {
-        this.updateQuality()
-
-        this.images[this.currentIdx]['active'] = true
         // wait for animation to end
         setTimeout(() => {
+            this.updateQuality()
+            this.images[this.currentIdx]['active'] = true
             this.images.forEach((image) => {
                 if (image != this.images[this.currentIdx]) {
                     image['active'] = false

src/index.html

@@ -8,18 +8,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="icon" type="image/x-icon" href="favicon.ico">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-    <!-- TODO: Include this over Angular-CLI -->
-    <script src="https://unpkg.com/object-fit-images@2.5.9/dist/ofi.browser.js"></script>
-    <!--<script src="http://cdn.rawgit.com/hammerjs/touchemulator/master/touch-emulator.js"></script>-->
-    <!--<script>-->
-        <!--TouchEmulator();-->
-    <!--</script>-->
 </head>
 <body>
-<script>
-    // polyfill: object fit support for IEdge 9-13, Android < 5, Safari < 10
-    objectFitImages();
-</script>
 
 <div class="mainContainer">
     <div class="headlineContainer">