简介
我们都熟悉Angular Ecosystem中的懒惰加载这个词。然而，当涉及到从AWS S3或其他第三方加载图片时，国外URL所花费的时间（响应时间）起到了至关重要的作用。
影响前端性能的一个重要因素是网页上加载的文件和资产的数量。我们已经使用了各种技术来减少用户登陆页面时被加载的资产数量，比如我们提供的文件最小化，压缩和缓存图片，最近我们在主页上增加了懒加载图片。
懒惰加载是一种在需要时加载内容（在这种情况下是图片）的模式，而不是一次性加载。这有助于我们减少为用户当前没有看到的内容加载的不必要的字节量（又称折叠下面的内容）。
主要挑战
我发现的问题是，一些可用的懒人 加载工具要求我指定一个高度或宽度，以便在加载时有一个空白空间来放置图片。指定一个高度是很棘手的，因为我们的图片是响应式的，它们的长宽比和尺寸取决于用户的屏幕或浏览器的大小。
其他实现方式
David Calignano的这篇博文处理了一些图片加载的情况。
实现
ng g c <image-loader-component>
image.loader.component.ts
import { Component, Input } from "@angular/core";
@Component({
selector: "app-image-loader",
templateUrl: "./image-loader.component.html",
styleUrls: ["./image-loader.component.scss"],
})
export class ImageLoaderComponent{
@Input() imageLoading: boolean = false;
@Input() imageLoaded: boolean = false;
@Input() imageUrl: string = "";
@Input() imageLoadingUrl: string = "";
@Input() noImageUrl: string = "";
@Input() alt: string = "";
@Input() imageId: string = "";
@Input() imageHeight: string = "";
@Input() imageWidth: string = "";
@Input() imageClass: string = "";
onImageLoaded() {
this.imageLoading = false;
}
handleEmptyImage() {
this.imageLoading = false;
this.imageUrl = this.noImageUrl;
}
}
我创建了一个输入属性的列表。所有这些都是不言自明的。
image.loader.component.html
<ng-container>
<img
[src]=”imageLoading ? imageLoadingUrl : imageUrl”
[alt]=”alt”
[id]=”imageId”
(load)=”onImageLoaded()”
(error)=”handleEmptyImage()”
loading=”lazy”
[ngClass]=”imageClass”
[height]=”imageHeight”
[width]=”imageWidth”
/>
</ng-container>
(load) - 当图像被成功加载时，会触发加载事件。
(error) - 当加载外部文件（如文档或图像）时发生错误，会触发error事件。
下面是loading 属性的支持值。
auto:浏览器的默认懒惰加载行为，这与不包括该属性相同。lazy:推迟加载资源，直到它与视口达到一个计算的距离。eager:立即加载资源，不管它在页面上的位置如何。
所以现在我们已经创建了我们的通用组件，让我们对父组件做一些修改。
app.component.html
<ng-container *ngIf="currentData && currentData.length">
<div *ngFor="let data of currentData; let i = index">
<app-generic-image-loading-component
[alt]="data.title"
[id]="'id-'+data.id"
[imageLoading]="data.imageLoading"
[imageLoadingUrl]="'loading-spinner-gif or svg '"
[imageUrl]="data.thumbnailUrl"
[noImageUrl]="'no-image-url'"
[imageHeight]="'100'"
[imageWidth]="'80'">
</app-generic-image-loading-component>
</div>
</ng-container>
- [imageLoading] - 代表图片是否被加载的布尔值。
- [imageLoadingUrl] - 字符串值的网址，它将被用于加载图像。
- [imageUrl] - 当图像加载完毕时，将使用字符串值的URL。
- [noImageUrl] - 当加载的图像的URL被破坏时，将显示图像。
app.component.ts
export class AppComponent implements OnInit {
getData() {
// http call for getting list of data
// make sure you create loading property or either get it from backend
// and set it initially false
}
ngOnInit(): void {
this.getData();
}
}
你就完成了...
结论
渐进式图像加载器允许用户看到质量较低的图像，而你的网站在后台加载较大的图像，并处理图像错误而不显示丑陋的破碎图像链接。
使用通用组件来处理图像加载场景，可以创建可重复使用的组件，这些组件提供了通用的逻辑和开箱即用的标记。使用这种通用组件，我们可以忽略重复的可能性。
演示：图像加载器
