Located the cause of high cpu usage, the UiImageLoader/ImageLoader directive

Author: gnu4cn

src/app/book/book.module.ts

@@ -41,7 +41,6 @@ import { ContentSearchDirective } from './directives/content-search.directive';
 
 import { environment } from '../../environments/environment';
 import { config } from '../gbr.config';
-import { UiImageLoaderDirective } from './directives/ui-image-loader.directive';
 
 @NgModule({
     imports: [
@@ -62,7 +61,6 @@ import { UiImageLoaderDirective } from './directives/ui-image-loader.directive';
         ElementInputDirective,
         ContentSearchDirective,
         SafeHtmlPipe,
-        UiImageLoaderDirective,
     ],
     providers: [
         SettingsService,
@@ -90,7 +88,6 @@ import { UiImageLoaderDirective } from './directives/ui-image-loader.directive';
         ElementInputDirective,
         SafeHtmlPipe,
         ContentSearchDirective,
-        UiImageLoaderDirective,
     ]
 })
 export class BookPageModule {

src/app/home/components/book-list.component.html

@@ -13,10 +13,7 @@
     <!-- 作者和来源 -->
     <mat-card-header>
         <img mat-card-avatar 
-             uiImageLoader
-             onErrorSrc="assets/images/avatar.png"
-             [src]="book.isFromMainstreamPlatform ? book.writer.avatarUrl : 'assets/images/avatar.png'" 
-             />
+             [src]="book.isFromMainstreamPlatform ? book.writer.avatarUrl : 'assets/images/avatar.png'" />
         <mat-card-title>
             {{book.writer.fullName.length > 0 ? book.writer.fullName : book.writer.name}}
         </mat-card-title>
@@ -28,13 +25,6 @@
 
     <mat-card-content *ngIf="book.desc.length > 0" class="description">
         <mat-label><b>“</b>{{book.desc.length > 256 ? book.desc.slice(0,256)+'...' : book.desc}}<b>”</b></mat-label>
-        <button class="readme-button" mat-button 
-                *ngIf="book.downloaded" 
-                matTooltip="{{'home.bookList.tooltip.readme' | translate}}"
-                (click)="openReadmeDialog(book)" 
-                size="small">
-            <ion-icon name="logo-markdown"></ion-icon>README.md
-        </button>
     </mat-card-content>
 
     <mat-card-content fxLayout="row" fxLayoutGap="5px" class="cate-list">

src/app/home/components/book-list.component.ts

@@ -2,7 +2,6 @@ import {
     Component, 
     OnInit, 
     OnChanges,
-    ChangeDetectorRef,
     SimpleChanges,
     Input
 } from '@angular/core';
@@ -21,7 +20,6 @@ import { OpMessageService } from '../services/op-message.service';
 
 import { DeleteBookDialog } from './delete-book-dialog.component';
 import { EditBookCateListDialog } from './edit-book-cate-list.component';
-import { ReadmeDialog } from './readme-dialog.component';
 import { ReadingRecordDialog } from './reading-record-dialog.component';
 
 import { 
@@ -56,7 +54,6 @@ export class BookListComponent implements OnInit, OnChanges {
         private dialog: MatDialog,
         private book: BookService,
         private i18n: I18nService,
-        private cdr: ChangeDetectorRef,
         private opMessage: OpMessageService
     ) {}
 
@@ -122,13 +119,6 @@ export class BookListComponent implements OnInit, OnChanges {
         console.log(cate)
     }
 
-    openReadmeDialog = (book: Book) => {
-        this.dialog.open(ReadmeDialog, {
-            width: '640px',
-            data: book
-        });
-    }
-
     openBook = (book: Book) => {
         this.book.open(book);
     }

src/app/home/components/readme-dialog.component.ts

@@ -3,24 +3,29 @@ import {
     Attribute,
     Renderer2,
     ElementRef,
-    HostListener } from '@angular/core';
+    HostListener 
+} from '@angular/core';
 
 @Directive({
-    selector: '[uiImageLoader]'
+    selector: '[imageLoader]'
 })
-export class UiImageLoaderDirective {
+export class ImageLoaderDirective {
     private loader = 'assets/images/loader.svg';
     constructor(
         @Attribute('onErrorSrc') public onErrorSrc: string,
         private renderer: Renderer2,
-        private el: ElementRef) {
+        private el: ElementRef
+    ) {
         this.renderer.setAttribute(this.el.nativeElement, 'src', this.loader);
     }
 
-    @HostListener('load') onLoad() {
+    @HostListener('load') 
+    onLoad() {
         this.renderer.setAttribute(this.el.nativeElement, 'src', this.el.nativeElement.src);
     }
-    @HostListener('error') onError() {
+
+    @HostListener('error') 
+    onError() {
         this.renderer.setAttribute(this.el.nativeElement, 'src', this.onErrorSrc);
     }
 }

src/app/home/components/readme.dialog.html

@@ -9,13 +9,11 @@ import { MaterialModule } from '../material.module';
 import { MglTimelineModule } from 'angular-mgl-timeline';
 
 import { I18nModule } from '../i18n/i18n.module';
-import { BookPageModule } from '../book/book.module';
 import { BookListComponent } from './components/book-list.component';
 import { NewBookDialog } from './components/new-book-dialog.component';
 import { DeleteBookDialog } from './components/delete-book-dialog.component';
 import { SnackbarComponent } from './components/snackbar.component';
 import { EditBookCateListDialog } from './components/edit-book-cate-list.component';
-import { ReadmeDialog } from './components/readme-dialog.component';
 import { ReadingRecordDialog } from './components/reading-record-dialog.component';
 import { SearchComponent } from './components/search.component';
 
@@ -32,14 +30,14 @@ import { HomePageRoutingModule } from './home-routing.module';
 import { HomePage } from './home.page';
 import { ReadableDatePipe } from './pipes/readable-date.pipe';
 import { StringToDatePipe } from './pipes/string-to-date.pipe';
+import { ImageLoaderDirective } from './directives/image-loader.directive';
 
 @NgModule({
     imports: [
         CommonModule,
         FormsModule,
         IonicModule,
         I18nModule,
-        BookPageModule,
         MglTimelineModule,
         MaterialModule,
         HomePageRoutingModule
@@ -49,12 +47,12 @@ import { StringToDatePipe } from './pipes/string-to-date.pipe';
         NewBookDialog,
         DeleteBookDialog,
         EditBookCateListDialog,
-        ReadmeDialog,
         ReadingRecordDialog,
         SnackbarComponent,
         SearchComponent,
         ReadableDatePipe,
-        StringToDatePipe
+        StringToDatePipe,
+        ImageLoaderDirective
     ],
     providers: [
         BookService,

src/app/home/components/readme.dialog.scss

@@ -1,6 +1,5 @@
 import { 
     Component, 
-    ChangeDetectorRef,
     OnInit,
     AfterViewInit
 } from '@angular/core';
@@ -108,7 +107,6 @@ export class HomePage implements OnInit, AfterViewInit {
         private message: MessageService,
         private fetchService: FetchService,
         private i18n: I18nService,
-        private cdr: ChangeDetectorRef,
         private book: BookService,
     ) {
         this.bookList = book.list;
@@ -179,8 +177,6 @@ export class HomePage implements OnInit, AfterViewInit {
 
         this.message.getMessage().subscribe((_: IMessage) => {
             if(_.event === 'book-list-updated') this.bookList = (_.data as Book[]).slice();
-
-            this.cdr.detectChanges();
         });
 
         this.crud.ipcRenderer.on('error-occured', (ev, book: Book) => {
@@ -202,8 +198,6 @@ export class HomePage implements OnInit, AfterViewInit {
             if(index < 0){
                 this.downloadingList.push(msg.book.id);
             }
-
-            this.cdr.detectChanges();
         });
 
         this.crud.ipcRenderer.on('book-downloaded', (ev, msg: IProgressMessage) => {