Skip to content

Commit ff8419f

Browse files
arturovtarturovt
authored
feat(module:avatar): add loading and fetchpriority attributes (#7347)
1 parent a70a682 commit ff8419f

4 files changed

Lines changed: 69 additions & 17 deletions

File tree

‎components/avatar/avatar.component.ts‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import {
1111
ElementRef,
1212
EventEmitter,
1313
inject,
14+
input,
1415
Input,
1516
numberAttribute,
1617
OnChanges,
@@ -26,6 +27,12 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
2627

2728
const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'avatar';
2829

30+
/** https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-loading */
31+
type NzAvatarLoading = 'eager' | 'lazy';
32+
33+
/** https://wicg.github.io/priority-hints/#idl-index */
34+
type NzAvatarFetchPriority = 'high' | 'low' | 'auto';
35+
2936
@Component({
3037
selector: 'nz-avatar',
3138
exportAs: 'nzAvatar',
@@ -34,7 +41,14 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'avatar';
3441
@if (nzIcon && hasIcon) {
3542
<nz-icon [nzType]="nzIcon" />
3643
} @else if (nzSrc && hasSrc) {
37-
<img [src]="nzSrc" [attr.srcset]="nzSrcSet" [attr.alt]="nzAlt" (error)="imgError($event)" />
44+
<img
45+
[src]="nzSrc"
46+
[attr.srcset]="nzSrcSet"
47+
[attr.alt]="nzAlt"
48+
[attr.loading]="nzLoading() || 'eager'"
49+
[attr.fetchpriority]="nzFetchPriority() || 'auto'"
50+
(error)="imgError($event)"
51+
/>
3852
} @else if (nzText && hasText) {
3953
<span class="ant-avatar-string" #textEl>{{ nzText }}</span>
4054
}
@@ -67,6 +81,8 @@ export class NzAvatarComponent implements OnChanges {
6781
@Input() nzSrcSet?: string;
6882
@Input() nzAlt?: string;
6983
@Input() nzIcon?: string;
84+
readonly nzLoading = input<NzAvatarLoading>();
85+
readonly nzFetchPriority = input<NzAvatarFetchPriority>();
7086
@Output() readonly nzError = new EventEmitter<Event>();
7187

7288
hasText: boolean = false;

‎components/avatar/avatar.spec.ts‎

Lines changed: 35 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,11 @@ describe('avatar', () => {
4747
let fixture: ComponentFixture<TestAvatarComponent>;
4848
let context: TestAvatarComponent;
4949
let dl: DebugElement;
50+
51+
function getImageElement(): HTMLImageElement {
52+
return dl.query(By.css('img')).nativeElement;
53+
}
54+
5055
beforeEach(() => {
5156
TestBed.configureTestingModule({
5257
providers: [provideNzIconsTesting()]
@@ -102,13 +107,13 @@ describe('avatar', () => {
102107
it('#nzSrcSet', () => {
103108
context.nzSrcSet = '1.png';
104109
fixture.detectChanges();
105-
const el = dl.query(By.css(`img`)).nativeElement as HTMLImageElement;
110+
const el = getImageElement();
106111
expect(el.srcset).toBe(context.nzSrcSet);
107112
});
108113
it('#nzAlt', () => {
109114
context.nzAlt = 'alt';
110115
fixture.detectChanges();
111-
const el = dl.query(By.css(`img`)).nativeElement as HTMLImageElement;
116+
const el = getImageElement();
112117
expect(el.alt).toBe(context.nzAlt);
113118
});
114119
});
@@ -278,6 +283,30 @@ describe('avatar', () => {
278283
}));
279284
});
280285

286+
describe('[nzLoading]', () => {
287+
it('should set `loading` attribute to `eager` by default', () => {
288+
expect(getImageElement().loading).toEqual('eager');
289+
});
290+
291+
it('should allow providing a binding for the `loading` attribute', () => {
292+
context.nzLoading = 'lazy';
293+
fixture.detectChanges();
294+
expect(getImageElement().loading).toEqual('lazy');
295+
});
296+
});
297+
298+
describe('[nzFetchPriority]', () => {
299+
it('should set `fetchpriority` attribute to `auto` by default', () => {
300+
expect(getImageElement().fetchPriority).toEqual('auto');
301+
});
302+
303+
it('should allow providing a binding for the `fetchpriority` attribute', () => {
304+
context.nzFetchPriority = 'high';
305+
fixture.detectChanges();
306+
expect(getImageElement().fetchPriority).toEqual('high');
307+
});
308+
});
309+
281310
describe('order: image > icon > text', () => {
282311
it('image priority', () => {
283312
expect(getType(dl)).toBe('image');
@@ -331,6 +360,8 @@ function getScaleFromCSSTransform(transform: string): number {
331360
[nzSrc]="nzSrc"
332361
[nzSrcSet]="nzSrcSet"
333362
[nzAlt]="nzAlt"
363+
[nzLoading]="nzLoading"
364+
[nzFetchPriority]="nzFetchPriority"
334365
></nz-avatar>
335366
`,
336367
styles: `
@@ -348,6 +379,8 @@ class TestAvatarComponent {
348379
nzSrc: string | null = imageBase64;
349380
nzSrcSet?: string;
350381
nzAlt?: string;
382+
nzLoading?: 'eager' | 'lazy';
383+
nzFetchPriority?: 'high' | 'low' | 'auto';
351384
}
352385

353386
@Component({

‎components/avatar/doc/index.en-US.md‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,22 +6,23 @@ cover: 'https://gw.alipayobjects.com/zos/antfincdn/aBcnbw68hP/Avatar.svg'
66
description: Used to represent users or things, supporting the display of images, icons, or characters.
77
---
88

9-
109
## API
1110

1211
### nz-avatar
1312

14-
| Property | Description | Type | Default | Global Config |
15-
|--------------|----------------------------------------------------------------------------------------------------|---------------------------------------------|-------------|---------------|
16-
| `[nzIcon]` | The `Icon` type for an icon avatar, see `Icon` | `string` | - |
17-
| `[nzShape]` | The shape of avatar | `'circle' \| 'square'` | `'circle'` | ✅ |
18-
| `[nzSize]` | The size of the avatar | `'large' \| 'small' \| 'default' \| number` | `'default'` | ✅ |
19-
| `[nzGap]` | Letter type unit distance between left and right sides | `number` | `4` | ✅ |
20-
| `[nzSrc]` | The address of the image for an image avatar | `string` | - |
21-
| `[nzSrcSet]` | a list of sources to use for different screen resolutions | string | - |
22-
| `[nzAlt]` | This attribute defines the alternative text describing the image | string | - |
23-
| `[nzText]` | Letter type avatar | `string` | - |
24-
| `(nzError)` | Handler when img load error, call the `preventDefault` method to prevent default fallback behavior | `EventEmitter<Event>` | - |
13+
| Property | Description | Type | Default | Global Config |
14+
| ------------------- | -------------------------------------------------------------------------------------------------- | ------------------------------------------- | ----------- | ------------- |
15+
| `[nzIcon]` | The `Icon` type for an icon avatar, see `Icon` | `string` | - |
16+
| `[nzShape]` | The shape of avatar | `'circle' \| 'square'` | `'circle'` | ✅ |
17+
| `[nzSize]` | The size of the avatar | `'large' \| 'small' \| 'default' \| number` | `'default'` | ✅ |
18+
| `[nzGap]` | Letter type unit distance between left and right sides | `number` | `4` | ✅ |
19+
| `[nzSrc]` | Avatar image URL | `string` | - |
20+
| `[nzSrcSet]` | a list of sources to use for different screen resolutions | `string` | - |
21+
| `[nzAlt]` | This attribute defines the alternative text describing the image | `string` | - |
22+
| `[nzText]` | Letter type avatar | `string` | - |
23+
| `[nzLoading]` | Sets the native [`loading`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#loading) attribute on the avatar image element | `'eager' \| 'lazy'` | `'eager'` | |
24+
| `[nzFetchPriority]` | Sets the native [`fetchpriority`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#fetchpriority) attribute on the avatar image element | `'high' \| 'low' \| 'auto'` | `'auto'` | |
25+
| `(nzError)` | Handler when img load error, call the `preventDefault` method to prevent default fallback behavior | `EventEmitter<Event>` | - |
2526

2627
### nz-avatar-group
2728

‎components/avatar/doc/index.zh-CN.md‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,11 @@ description: 用来代表用户或事物，支持图片、图标或字符展示
1919
| `[nzSize]` | 设置头像的大小 | `'large' \| 'small' \| 'default' \| number` | `'default'` | ✅ |
2020
| `[nzGap]` | 字符类型距离左右两侧边界单位像素 | `number` | `4` | ✅ |
2121
| `[nzSrc]` | 图片类头像的资源地址 | `string` | - |
22-
| `[nzSrcSet]` | 设置图片类头像响应式资源地址 | string | - |
23-
| `[nzAlt]` | 图像无法显示时的替代文本 | string | - |
22+
| `[nzSrcSet]` | 设置图片类头像响应式资源地址 | `string` | - |
23+
| `[nzAlt]` | 图像无法显示时的替代文本 | `string` | - |
2424
| `[nzText]` | 文本类头像 | `string` | - |
25+
| `[nzLoading]` | 设置图片类头像 `<img>` 元素原生 [`loading`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference/Elements/img#loading) 属性 | `'eager' \| 'lazy'` | `'eager'` | |
26+
| `[nzFetchPriority]` | 设置图片类头像 `<img>` 元素原生 [`fetchpriority`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference/Elements/img#fetchpriority) 属性 | `'high' \| 'low' \| 'auto'` | `'auto'` | |
2527
| `(nzError)` | 图片加载失败的事件，调用 `preventDefault` 方法会阻止组件默认的 fallback 行为 | `EventEmitter<Event>` | - |
2628

2729
### nz-avatar-group

0 commit comments

Comments
 (0)