[develop | DONE | CHANGED]: funders.component.html: Added loading="lazy" on images (<img> elements).

This commit is contained in:
Konstantina Galouni 2024-02-28 17:30:43 +02:00
parent 463410a135
commit 8949088e0e
1 changed files with 8 additions and 8 deletions

View File

@ -142,9 +142,9 @@
<div class="uk-card-body"> <div class="uk-card-body">
<!-- funder logo --> <!-- funder logo -->
<div class="uk-card-media-top uk-margin-medium-top uk-padding-large uk-padding-remove-vertical uk-flex uk-flex-center uk-flex-middle uk-height-xsmall"> <div class="uk-card-media-top uk-margin-medium-top uk-padding-large uk-padding-remove-vertical uk-flex uk-flex-center uk-flex-middle uk-height-xsmall">
<img *ngIf="funder.logoUrl; else elseBlock" [src]="funder | logoUrl" [alt]="funder.name + ' logo'" class="uk-height-max-xsmall uk-blend-multiply"> <img *ngIf="funder.logoUrl; else elseBlock" [src]="funder | logoUrl" [alt]="funder.name + ' logo'" class="uk-height-max-xsmall uk-blend-multiply" loading="lazy">
<ng-template #elseBlock> <ng-template #elseBlock>
<img src="assets/common-assets/placeholder.png" alt="OpenAIRE placeholder logo" class="uk-height-max-xsmall uk-blend-multiply"> <img src="assets/common-assets/placeholder.png" alt="OpenAIRE placeholder logo" class="uk-height-max-xsmall uk-blend-multiply" loading="lazy">
</ng-template> </ng-template>
</div> </div>
<!-- funder alias --> <!-- funder alias -->
@ -168,7 +168,7 @@
target="_blank" [href]="'https://'+(properties.environment =='beta' || properties.environment =='development'?'beta.':'')+'monitor.openaire.eu/dashboard/'+funder.alias"> target="_blank" [href]="'https://'+(properties.environment =='beta' || properties.environment =='development'?'beta.':'')+'monitor.openaire.eu/dashboard/'+funder.alias">
<span class="uk-flex uk-flex-middle"> <span class="uk-flex uk-flex-middle">
<img src="assets/common-assets/common/Symbol.png" alt="OpenAIRE logo" <img src="assets/common-assets/common/Symbol.png" alt="OpenAIRE logo"
class="uk-margin-xsmall-right" style="width: 17px; height: 17px;"> class="uk-margin-xsmall-right" style="width: 17px; height: 17px;" loading="lazy">
<span class="monitor-dashboard-link uk-text-uppercase">Monitor Dashboard</span> <span class="monitor-dashboard-link uk-text-uppercase">Monitor Dashboard</span>
</span> </span>
</a> </a>
@ -176,7 +176,7 @@
<span *ngIf="funder.monitorDashboard && funder.monitorDashboardStatus == 'RESTRICTED'" <span *ngIf="funder.monitorDashboard && funder.monitorDashboardStatus == 'RESTRICTED'"
class="uk-flex uk-flex-middle"> class="uk-flex uk-flex-middle">
<img src="assets/common-assets/common/Symbol.png" alt="OpenAIRE logo" <img src="assets/common-assets/common/Symbol.png" alt="OpenAIRE logo"
class="uk-margin-xsmall-right" style="width: 17px; height: 17px;"> class="uk-margin-xsmall-right" style="width: 17px; height: 17px;" loading="lazy">
<span class="monitor-dashboard-link uk-text-uppercase uk-text-bold uk-text-small">Monitor Dashboard</span> <span class="monitor-dashboard-link uk-text-uppercase uk-text-bold uk-text-small">Monitor Dashboard</span>
<icon class="uk-margin-xsmall-left" name="closed_access" [flex]="true" [ratio]="1"></icon> <icon class="uk-margin-xsmall-left" name="closed_access" [flex]="true" [ratio]="1"></icon>
</span> </span>
@ -211,9 +211,9 @@
<div class="uk-grid uk-grid-divider uk-grid-small" uk-grid> <div class="uk-grid uk-grid-divider uk-grid-small" uk-grid>
<div class="uk-width-expand uk-flex uk-flex-middle"> <div class="uk-width-expand uk-flex uk-flex-middle">
<div class="uk-width-1-6 uk-flex uk-flex-middle uk-flex-center"> <div class="uk-width-1-6 uk-flex uk-flex-middle uk-flex-center">
<img *ngIf="funder.logoUrl; else elseBlock" [src]="funder | logoUrl" [alt]="funder.name + ' logo'" class="uk-height-max-xsmall uk-blend-multiply"> <img *ngIf="funder.logoUrl; else elseBlock" [src]="funder | logoUrl" [alt]="funder.name + ' logo'" class="uk-height-max-xsmall uk-blend-multiply" loading="lazy">
<ng-template #elseBlock> <ng-template #elseBlock>
<img src="assets/common-assets/placeholder.png" alt="OpenAIRE placeholder logo" class="uk-height-max-xsmall uk-blend-multiply"> <img src="assets/common-assets/placeholder.png" alt="OpenAIRE placeholder logo" class="uk-height-max-xsmall uk-blend-multiply" loading="lazy">
</ng-template> </ng-template>
</div> </div>
<div class="uk-width-expand uk-margin-medium-left"> <div class="uk-width-expand uk-margin-medium-left">
@ -234,14 +234,14 @@
target="_blank" [href]="'https://'+(properties.environment =='beta' || properties.environment =='development'?'beta.':'')+'monitor.openaire.eu/dashboard/'+funder.alias"> target="_blank" [href]="'https://'+(properties.environment =='beta' || properties.environment =='development'?'beta.':'')+'monitor.openaire.eu/dashboard/'+funder.alias">
<span class="uk-flex uk-flex-middle"> <span class="uk-flex uk-flex-middle">
<img src="assets/common-assets/common/Symbol.png" alt="OpenAIRE logo" <img src="assets/common-assets/common/Symbol.png" alt="OpenAIRE logo"
class="uk-margin-xsmall-right" style="width: 17px; height: 17px;"> class="uk-margin-xsmall-right" style="width: 17px; height: 17px;" loading="lazy">
<span class="monitor-dashboard-link uk-text-uppercase">Monitor Dashboard</span> <span class="monitor-dashboard-link uk-text-uppercase">Monitor Dashboard</span>
</span> </span>
</a> </a>
<span *ngIf="funder.monitorDashboard && funder.monitorDashboardStatus == 'RESTRICTED'" <span *ngIf="funder.monitorDashboard && funder.monitorDashboardStatus == 'RESTRICTED'"
class="uk-flex uk-flex-middle"> class="uk-flex uk-flex-middle">
<img src="assets/common-assets/common/Symbol.png" alt="OpenAIRE logo" <img src="assets/common-assets/common/Symbol.png" alt="OpenAIRE logo"
class="uk-margin-xsmall-right" style="width: 17px; height: 17px;"> class="uk-margin-xsmall-right" style="width: 17px; height: 17px;" loading="lazy">
<span class="monitor-dashboard-link uk-text-uppercase uk-text-bold uk-text-small">Monitor Dashboard</span> <span class="monitor-dashboard-link uk-text-uppercase uk-text-bold uk-text-small">Monitor Dashboard</span>
<icon class="uk-margin-xsmall-left" name="closed_access" [flex]="true" [ratio]="1"></icon> <icon class="uk-margin-xsmall-left" name="closed_access" [flex]="true" [ratio]="1"></icon>
</span> </span>