Merge pull request #11 from maxisam/feat/continue-loading

feat: continue loading

Author: maxisam

README.md

@@ -25,6 +25,8 @@ Support Angular >=6.0.0
 
 - Load image directly for spider (SEO friendly) or non-supported browsers
 
+- Aggressive Loading. Able to continue to load even if images haven't got intersected when the concurrently loading count is lower than a certain value. (_after 4.0.0_)
+
 ## Install
 
 ```bat
@@ -137,7 +139,7 @@ For `ngx-image-placeholder` component, it takes
 
 - placeholderImageSrc
 
-(after 3.0.0, you can set imageRatio and placeholderImageSrc directly on `ngxProgressiveImage` and spare ngx-image-placeholder layer)
+(_after 3.0.0_, you can set imageRatio and placeholderImageSrc directly on `ngxProgressiveImage` and spare ngx-image-placeholder layer)
 
 For `ngx-progressive-image-loader` component, it takes
 
@@ -147,6 +149,10 @@ For `ngx-progressive-image-loader` component, it takes
 
 - filter
 
+- isAggressiveLoading: boolean; default to `true`; Set to `true` to enable **Aggressive Loading** feature. (_after 4.0.0_)
+
+- concurrentLoading: number; default t0 4; Decided at least how many concurrent loading when **Aggressive Loading** is enabled
+
 For `ngxProgressiveImage` directive, (only for image or source elements)
 
 - imageRatio

angular.json

@@ -3,7 +3,7 @@
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
-    "package-host": {
+    "library-host": {
       "root": "",
       "sourceRoot": "src",
       "projectType": "application",
@@ -13,7 +13,7 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "outputPath": "dist/package-host",
+            "outputPath": "dist/library-host",
             "index": "src/index.html",
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
@@ -45,19 +45,19 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "package-host:build",
+            "browserTarget": "library-host:build",
             "port": 5200
           },
           "configurations": {
             "production": {
-              "browserTarget": "package-host:build:production"
+              "browserTarget": "library-host:build:production"
             }
           }
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "package-host:build"
+            "browserTarget": "library-host:build"
           }
         },
         "test": {
@@ -81,19 +81,19 @@
         }
       }
     },
-    "package-host-e2e": {
+    "library-host-e2e": {
       "root": "e2e/",
       "projectType": "application",
       "architect": {
         "e2e": {
           "builder": "@angular-devkit/build-angular:protractor",
           "options": {
             "protractorConfig": "e2e/protractor.conf.js",
-            "devServerTarget": "package-host:serve"
+            "devServerTarget": "library-host:serve"
           },
           "configurations": {
             "production": {
-              "devServerTarget": "package-host:serve:production"
+              "devServerTarget": "library-host:serve:production"
             }
           }
         },
@@ -140,7 +140,10 @@
       }
     }
   },
-  "defaultProject": "package-host",
+  "defaultProject": "library-host",
+  "cli": {
+    "packageManager": "yarn"
+  },
   "schematics": {
     "@schematics/angular:component": {
       "prefix": "app",

package.json

@@ -1,15 +1,15 @@
 {
-  "name": "package-host",
+  "name": "ngx-progressive-image-loader",
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
-    "prettier": "prettier --write \"**/*.{js,json,css,md,ts,html,component.html}\"",
+    "prettier": "prettier --write \"**/*.{json,md,ts,html,component.html}\"",
     "start": "ng serve",
     "build": "npm run build:lib",
     "build:lib": "ng build ngx-progressive-image-loader && npm run copy-scss && npm run copy-readme",
     "build:lib:w": "ng build ngx-progressive-image-loader --watch",
-    "publish:lib": "npm publish ./dist/ngx-progressive-image-loader",
-    "publish:lib:next": "npm publish ./dist/ngx-progressive-image-loader --tag next",
+    "publish:lib": "yarn publish ./dist/ngx-progressive-image-loader",
+    "publish:lib:next": "yarn publish ./dist/ngx-progressive-image-loader --tag next",
     "copy-scss": "cpx \"./projects/ngx-progressive-image-loader/src/lib/*.scss\" \"./dist/ngx-progressive-image-loader/\" --verbose",
     "copy-readme": "cpx \"./README.md\" \"./dist/ngx-progressive-image-loader\"",
     "test": "ng test ngx-progressive-image-loader",
@@ -27,22 +27,25 @@
     "@angular/platform-browser-dynamic": "~7.2.0",
     "@angular/router": "~7.2.0",
     "core-js": "^2.5.4",
+    "ngx-logger": "^3.3.13",
+    "ngx-progressive-image-loader": "^4.0.0",
+    "ngx-window-token": "^2.0.1",
+    "node-sass": "^4.12.0",
     "rxjs": "~6.3.3",
     "tslib": "^1.9.0",
-    "zone.js": "~0.8.26",
-    "ngx-progressive-image-loader": "^4.0.0-beta.12",
-    "ngx-window-token": "^2.0.1"
+    "zone.js": "~0.8.26"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.13.0",
     "@angular-devkit/build-ng-packagr": "~0.13.0",
     "@angular/cli": "~7.3.4",
     "@angular/compiler-cli": "~7.2.0",
     "@angular/language-service": "~7.2.0",
-    "@types/node": "~8.9.4",
     "@types/jasmine": "~2.8.8",
     "@types/jasminewd2": "~2.0.3",
+    "@types/node": "~8.9.4",
     "codelyzer": "~4.5.0",
+    "cpx": "^1.5.0",
     "husky": "1.3.1",
     "jasmine-core": "~2.99.1",
     "jasmine-spec-reporter": "~4.2.1",
@@ -60,18 +63,17 @@
     "tslib": "^1.9.0",
     "tslint": "~5.11.0",
     "tslint-config-prettier": "1.18.0",
-    "typescript": "~3.2.2",
-    "cpx": "^1.5.0"
+    "typescript": "~3.2.2"
   },
   "husky": {
-      "hooks": {
-        "pre-commit": "lint-staged"
-      }
-    },
-    "lint-staged": {
-      "*.{js,json,css,md,ts,html,component.html}": [
-        "prettier --write",
-        "git add"
-      ]
+    "hooks": {
+      "pre-commit": "lint-staged"
     }
+  },
+  "lint-staged": {
+    "*.{js,json,css,md,ts,html,component.html}": [
+      "prettier --write",
+      "git add"
+    ]
   }
+}

projects/ngx-progressive-image-loader/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-progressive-image-loader",
-  "version": "4.0.0-beta.1",
+  "version": "4.0.0",
   "author": {
     "name": "Sam Lin",
     "email": "[email protected]"
@@ -25,7 +25,7 @@
     "ngx-window-token": ">=2.0.0"
   },
   "peerDependencies": {
-    "@angular/common": ">=6.0.0 || >=7.0.0 || >=8.0.0",
-    "@angular/core": ">=6.0.0 || >=7.0. || >=8.0.00"
+    "@angular/common": ">=6.0.0",
+    "@angular/core": ">=6.0.0"
   }
 }

projects/ngx-progressive-image-loader/src/lib/config.ts

@@ -3,7 +3,9 @@ import { InjectionToken } from '@angular/core';
 export interface IImageLoaderOptions extends IntersectionObserverInit {
   placeholderImageSrc?: string;
   imageRatio: number;
-  filter: string;
+  filter?: string;
+  isAggressiveLoading?: boolean;
+  concurrentLoading?: number;
 }
 export const IMAGE_LOADER_CONFIG_TOKEN = new InjectionToken<IImageLoaderOptions>(
   'Image loader Config'
@@ -12,7 +14,9 @@ export const IMAGE_LOADER_CONFIG_TOKEN = new InjectionToken<IImageLoaderOptions>
 export const DEFAULT_IMAGE_LOADER_OPTIONS = <IImageLoaderOptions>{
   // root?: Element | null;
   rootMargin: '10px',
-  threshold: 0.1,
+  threshold: [0.1, 0.5, 1],
   imageRatio: 16 / 9,
-  placeholderImageSrc: ''
+  placeholderImageSrc: '',
+  isAggressiveLoading: true,
+  concurrentLoading: 4
 };

projects/ngx-progressive-image-loader/src/lib/image-placeholder/image-placeholder.component.ts

@@ -12,8 +12,7 @@ import { ProgressiveImageLoaderComponent } from '../progressive-image-loader/pro
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ImagePlaceholderComponent implements OnInit {
-  @HostBinding('class')
-  class = 'ngx-image-placeholder';
+  @HostBinding('class') class = 'ngx-image-placeholder';
   @HostBinding('style')
   get placeHolder(): SafeStyle {
     return this.sanitizer.bypassSecurityTrustStyle(
@@ -22,11 +21,9 @@ export class ImagePlaceholderComponent implements OnInit {
   }
 
   // to create a placeholder before finish loading the real image to avoid reflow
-  @Input()
-  imageRatio: number;
+  @Input() imageRatio: number;
   // a loading image showing before the real image is loaded
-  @Input()
-  placeholderImageSrc: string;
+  @Input() placeholderImageSrc: string;
 
   get imageFilter(): SafeStyle {
     return this.sanitizer.bypassSecurityTrustStyle(`${this._ProgressiveImageLoader.filter}`);

projects/ngx-progressive-image-loader/src/lib/progressive-image-loader/progressive-image-loader.component.ts

@@ -1,11 +1,12 @@
 import { isPlatformBrowser } from '@angular/common';
 import {
+  ChangeDetectionStrategy,
   Component,
-  ElementRef,
   Inject,
   Input,
   OnDestroy,
   OnInit,
+  Optional,
   PLATFORM_ID,
   Renderer2
 } from '@angular/core';
@@ -16,32 +17,52 @@ import { isSpider, isSupportIntersectionObserver, loadImage } from '../util';
 
 @Component({
   selector: 'ngx-progressive-image-loader',
+  exportAs: 'ngxProgressiveImageLoader',
   template: `
     <ng-content></ng-content>
-  `
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ProgressiveImageLoaderComponent implements OnInit, OnDestroy {
   // define the placeholder height for all images inside this components
-  @Input()
-  imageRatio: number;
-
-  @Input()
-  filter: string;
+  @Input() imageRatio: number;
+  // how many image at least should load at the same time
+  @Input() concurrentLoading: number;
+  // is going to load images that are being observed but haven't been intersected yet when loading counter < concurrentLoading
+  @Input() isAggressiveLoading: boolean;
+  @Input() filter: string;
   // the src of loading image
-  @Input()
-  placeholderImageSrc: string;
+  @Input() placeholderImageSrc: string;
+
   intersectionObserver: IntersectionObserver;
+  // to store observed images
+  targetMap = new Map();
+  // to maintain the sequence of observed images
+  targetQueue = <string[]>[];
+  // counter of current loading images
+  loading = 0;
+  public get isObservable(): boolean {
+    return !!this.intersectionObserver;
+  }
 
   constructor(
-    element: ElementRef,
     public _Renderer: Renderer2,
     public _ConfigurationService: ConfigurationService,
     @Inject(PLATFORM_ID) private platformId: any,
-    @Inject(WINDOW) private window: any
+    @Optional()
+    @Inject(WINDOW)
+    private window: any
   ) {}
 
   ngOnInit() {
+    if (this.isAggressiveLoading === undefined) {
+      this.isAggressiveLoading = this._ConfigurationService.config.isAggressiveLoading;
+    }
+    if (this.concurrentLoading === undefined) {
+      this.concurrentLoading = this._ConfigurationService.config.concurrentLoading;
+    }
     if (
+      this.window &&
       isSupportIntersectionObserver(this.window) &&
       !isSpider(this.window) &&
       isPlatformBrowser(this.platformId)
@@ -63,21 +84,54 @@ export class ProgressiveImageLoaderComponent implements OnInit, OnDestroy {
     }
   }
 
-  onIntersectionChanged(entries: IntersectionObserverEntry[], observer: IntersectionObserver) {
-    entries.forEach(
-      entry =>
-        entry.isIntersecting &&
-        this.onImageAppearsInViewport(entry.target as HTMLImageElement, observer)
-    );
+  observe(target: HTMLImageElement) {
+    // so intersection observer can always detect it correctly, otherwise image elements with 0 in height sometime don't load correctly
+    target.style.minHeight = '1rem';
+    this.intersectionObserver.observe(target);
+    this.targetMap.set(target.dataset.src, target);
+    this.targetQueue.push(target.dataset.src);
   }
 
-  onImageAppearsInViewport(image: HTMLImageElement, observer: IntersectionObserver) {
+  unobserve(target: HTMLImageElement) {
+    target.style.minHeight = 'initial';
+    this.targetMap.delete(target.dataset.src);
+    this.intersectionObserver.unobserve(target);
+  }
+  // called after an image loaded
+  imageLoaded() {
+    this.loading--;
+    while (
+      this.isAggressiveLoading &&
+      this.targetQueue &&
+      this.targetQueue.length &&
+      this.loading <= this.concurrentLoading
+    ) {
+      const next = this.targetQueue.shift();
+      this.targetMap.has(next) && this.loadImage(this.targetMap.get(next));
+    }
+  }
+  onIntersectionChanged(entries: IntersectionObserverEntry[], observer: IntersectionObserver) {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        this.loadImage(entry.target as HTMLImageElement);
+      }
+    });
+  }
+  // start loading an image
+  loadImage(image: HTMLImageElement) {
     // Stop observing the current target
-    observer.unobserve(image);
+    this.unobserve(image);
+    this.loading++;
     loadImage(this._Renderer, image);
   }
 
+  reset() {
+    this.targetQueue = [];
+    this.targetMap = new Map();
+    this.isObservable && this.intersectionObserver.disconnect();
+  }
   ngOnDestroy(): void {
-    this.intersectionObserver && this.intersectionObserver.disconnect();
+    this.isObservable && this.intersectionObserver.disconnect();
+    this.intersectionObserver = this.targetQueue = this.targetMap = undefined;
   }
 }