ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2025-04-07 10:36:41 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Lazy loading images

Browse Source
This commit is contained in:
piotrpekala7 2020-11-06 12:46:58 +01:00
parent 98df9cd2b7
commit c431d163c2
2 changed files with 13 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/components/preferences/common/symbols/symbols.component.html
View File

@ -26,7 +26,7 @@
<div class="wrapper">
<div class="buttonWrapper" *ngFor="let symbol of filteredSymbols | filenamefilter: searchText">
<button [ngClass]="{ buttonSelected: isSelected === symbol.symbol_id }" class="button" (click)="setSelected(symbol.symbol_id)">
<img [ngClass]="{ imageSelected: isSelected === symbol.symbol_id }" class="image" [src]="getImageSourceForTemplate(symbol.symbol_id)"/>
<img lazyimg [ngClass]="{ imageSelected: isSelected === symbol.symbol_id }" class="image" [src]="getImageSourceForTemplate(symbol.symbol_id)"/>
</button>
</div>
</div>

12
src/app/directives/LazyImg.directive.ts Normal file
View File

@ -0,0 +1,12 @@
import { Directive, ElementRef } from '@angular/core';
@Directive({ selector: '[lazyimg]' })
export class LazyImgDirective {
constructor({ nativeElement }: ElementRef<HTMLImageElement>) {
const supports = 'loading' in HTMLImageElement.prototype;
if (supports) {
nativeElement.setAttribute('loading', 'lazy');
}
}
}