lazyLoading

src/renderer/app.module.ts

@@ -74,6 +74,7 @@ function ngObjectsToArray<T>(importObject: T) {
     Directives.DraggableDirective,
     Directives.TextScrollDirective,
     Directives.VarDirective,
+    Directives.InViewDirective,
     Pipes.ArrayConcatPipe,
     Pipes.CssUrl,
     Pipes.FileImage,

src/renderer/components/preview.component.ts

@@ -14,6 +14,7 @@ import * as steam from '../../lib/helpers/steam';
 import * as _ from 'lodash';
 import * as path from 'path';
 import { allProviders, imageProviderNames, providerCategories, sgdbIdRegex } from '../../lib/image-providers/available-providers';
+import { DomSanitizer } from '@angular/platform-browser';
 
 @Component({
   selector: 'preview',
@@ -69,6 +70,8 @@ export class PreviewComponent implements OnDestroy {
   excludePutBacks: {[exceptionKey: string]: boolean} = {};
   exclusionCount: number = 0;
 
+  inViewDict: {[appId: string]: boolean} = {};
+
   constructor(
     private previewService: PreviewService,
     private settingsService: SettingsService,
@@ -80,7 +83,8 @@ export class PreviewComponent implements OnDestroy {
     private activatedRoute: ActivatedRoute,
     private fuzzyTest: FuzzyTestPipe,
     private intersectionTest: IntersectionTestPipe,
-    private ipcService: IpcService
+    private ipcService: IpcService,
+    private sanitizer: DomSanitizer
   ) {
     this.previewData = this.previewService.getPreviewData();
     this.previewVariables = this.previewService.getPreviewVariables();
@@ -257,7 +261,12 @@ export class PreviewComponent implements OnDestroy {
     return posterUrl ? posterUrl : require('../../assets/images/no-images.svg');
   }
 
+  onAppInView(inView: boolean, appElement: ElementRef, app: PreviewDataApp) {
+    this.inViewDict[app.extractedTitle]||=inView
+  }
+
   setBackgroundImage(app: PreviewDataApp, image: ImageContent, artworkType?: ArtworkType, imageIndex?: number) {
+    if(!this.inViewDict[app.extractedTitle]) { return null; }
     const currentViewType = this.previewService.getCurrentViewType();
     if (image == undefined) {
       const actualArtworkType: ArtworkType = isArtworkType(currentViewType) ? currentViewType : artworkType

src/renderer/directives/index.ts

@@ -1,3 +1,4 @@
 export * from './text-scroll.directive';
 export * from './draggable.directive';
-export * from './ng-var.directive';
+export * from './ng-var.directive';
+export * from './inview.directive';

src/renderer/directives/inview.directive.ts

@@ -0,0 +1,54 @@
+import { Directive, ElementRef, Input, Output, EventEmitter, OnInit, OnDestroy } from '@angular/core';
+import { debounce } from "lodash";
+
+@Directive({
+  selector: '[ng-inview]'
+})
+export class InViewDirective implements OnInit, OnDestroy {
+  @Input() parentSelector: string;
+  @Input() margin: number;
+  @Output() inView = new EventEmitter<{inView: boolean, target: ElementRef}>();
+
+  private parentElement: HTMLElement;
+  private parentRect: DOMRect; 
+  constructor(private el: ElementRef) {}
+
+  ngOnInit() {
+    this.parentElement = this.getParentElement();
+    if (this.parentElement) {
+      this.parentElement.addEventListener('scroll', this.onParentScroll);
+      this.parentRect = this.parentElement.getBoundingClientRect();
+
+      this.checkInView();
+    }
+  }
+
+  ngOnDestroy() {
+    if (this.parentElement) {
+      this.parentElement.removeEventListener('scroll', this.onParentScroll);
+    }
+  }
+
+  private getParentElement(): HTMLElement {
+    if (this.parentSelector) {
+      return document.querySelector(this.parentSelector);
+    } else {
+      return this.el.nativeElement.parentElement;
+    }
+  }
+
+  private onParentScroll = debounce(() => {
+    this.checkInView();
+  }, 500);
+
+  private checkInView() {
+    const rect = this.el.nativeElement.getBoundingClientRect();
+    const inView = (
+      rect.top >= this.parentRect.top - this.margin &&
+      rect.bottom <= this.parentRect.bottom + this.margin
+      //&& rect.left >= parentRect.left &&
+      //rect.right <= parentRect.right
+    );
+    this.inView.emit({inView: inView, target: this.el});
+  }
+}

src/renderer/templates/preview.component.html

@@ -341,6 +341,7 @@ <h1>Add your games to Steam</h1>
                           <div
                             class="app"
                             *ngIf="isAppVisible(app)"
+                            ng-inview [parentSelector]="'.entries'" [margin]="400" (inView)="onAppInView($event.inView, $event.target, app)"
                             [style.backgroundImage]="setBackgroundImage(app, image, artworkType) | cssUrl | safeStyle"
                             [class.retrieving]="getImagePool(appimages.imagePool, artworkType).retrieving"
                             [class.noImages]="
@@ -544,9 +545,10 @@ <h1>Add your games to Steam</h1>
                     <ng-container *ngVar="getBackgroundImage(app) as image">
                       <ng-container *ngVar="getAppImages(app) as appimages">
                         <div
+                          ng-inview [parentSelector]="'.entries'" [margin]="400" (inView)="onAppInView($event.inView, $event.target, app)"
+                          [style.backgroundImage]="setBackgroundImage(app, image) | cssUrl | safeStyle"
                           class="app"
                           *ngIf="isAppVisible(app)"
-                          [style.backgroundImage]="setBackgroundImage(app, image) | cssUrl | safeStyle"
                           [class.retrieving]="getImagePool(appimages.imagePool).retrieving"
                           [class.noImages]="!getImagePool(appimages.imagePool).retrieving && image == undefined"
                           [class.downloading]="image != undefined && image.loadStatus === 'downloading'"