From b70791f34c8463d31d674c97bd31476d5ade21a9 Mon Sep 17 00:00:00 2001 From: Parsa Arvaneh Date: Sat, 11 Nov 2023 17:10:06 +0330 Subject: [PATCH 1/6] feat(module:image): supporting lazy loading images --- components/image/demo/preview-group.ts | 17 +++++++++++++++-- components/image/image.directive.ts | 20 ++++++++++++++++++-- 2 files changed, 33 insertions(+), 4 deletions(-) diff --git a/components/image/demo/preview-group.ts b/components/image/demo/preview-group.ts index 1013b65f133..57af61072b1 100644 --- a/components/image/demo/preview-group.ts +++ b/components/image/demo/preview-group.ts @@ -4,8 +4,21 @@ import { Component } from '@angular/core'; selector: 'nz-demo-image-preview-group', template: ` - - + + + ` }) diff --git a/components/image/image.directive.ts b/components/image/image.directive.ts index 9700e7f7839..fbcc73e157c 100644 --- a/components/image/image.directive.ts +++ b/components/image/image.directive.ts @@ -30,6 +30,7 @@ import { NzImageService } from './image.service'; const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'image'; export type ImageStatusType = 'error' | 'loading' | 'normal'; +export type nzLoading = 'eager' | 'lazy'; @Directive({ selector: 'img[nz-image]', @@ -45,6 +46,7 @@ export class NzImageDirective implements OnInit, OnChanges, OnDestroy { @Input() nzSrc = ''; @Input() nzSrcset = ''; + @Input() nzLoading: nzLoading = 'lazy'; @Input() @InputBoolean() @WithConfig() nzDisablePreview: boolean = false; @Input() @WithConfig() nzFallback: string | null = null; @Input() @WithConfig() nzPlaceholder: string | null = null; @@ -114,8 +116,8 @@ export class NzImageDirective implements OnInit, OnChanges, OnDestroy { ngOnChanges(changes: SimpleChanges): void { const { nzSrc } = changes; if (nzSrc) { - this.getElement().nativeElement.src = nzSrc.currentValue; - this.backLoad(); + // this.getElement().nativeElement.src = nzSrc.currentValue; + // this.backLoad(); } } @@ -126,8 +128,11 @@ export class NzImageDirective implements OnInit, OnChanges, OnDestroy { */ private backLoad(): void { this.backLoadImage = this.document.createElement('img'); + this.backLoadImage.loading = this.nzLoading; + this.backLoadImage.setAttribute('loading', 'lazy'); this.backLoadImage.src = this.nzSrc; this.backLoadImage.srcset = this.nzSrcset; + this.backLoadImage.className = 'test'; this.status = 'loading'; // unsubscribe last backLoad @@ -136,13 +141,20 @@ export class NzImageDirective implements OnInit, OnChanges, OnDestroy { this.backLoadDestroy$ = new Subject(); if (this.backLoadImage.complete) { this.status = 'normal'; + this.getElement().nativeElement.loading = this.nzLoading; + this.backLoadImage.setAttribute('loading', 'lazy'); this.getElement().nativeElement.src = this.nzSrc; this.getElement().nativeElement.srcset = this.nzSrcset; + this.getElement().nativeElement.className = 'test'; } else { if (this.nzPlaceholder) { + this.getElement().nativeElement.loading = this.nzLoading; + this.backLoadImage.setAttribute('loading', 'lazy'); this.getElement().nativeElement.src = this.nzPlaceholder; this.getElement().nativeElement.srcset = ''; } else { + this.getElement().nativeElement.loading = this.nzLoading; + this.backLoadImage.setAttribute('loading', 'lazy'); this.getElement().nativeElement.src = this.nzSrc; this.getElement().nativeElement.srcset = this.nzSrcset; } @@ -153,6 +165,8 @@ export class NzImageDirective implements OnInit, OnChanges, OnDestroy { .pipe(takeUntil(this.backLoadDestroy$), takeUntil(this.destroy$)) .subscribe(() => { this.status = 'normal'; + this.getElement().nativeElement.loading = this.nzLoading; + this.backLoadImage.setAttribute('loading', 'lazy'); this.getElement().nativeElement.src = this.nzSrc; this.getElement().nativeElement.srcset = this.nzSrcset; }); @@ -162,6 +176,8 @@ export class NzImageDirective implements OnInit, OnChanges, OnDestroy { .subscribe(() => { this.status = 'error'; if (this.nzFallback) { + this.getElement().nativeElement.loading = this.nzLoading; + this.backLoadImage.setAttribute('loading', 'lazy'); this.getElement().nativeElement.src = this.nzFallback; this.getElement().nativeElement.srcset = ''; } From e992f21f7637989da4a0d856fd67468dedfffef3 Mon Sep 17 00:00:00 2001 From: Parsa Arvaneh Date: Mon, 13 Nov 2023 01:46:53 +0330 Subject: [PATCH 2/6] feat(module:image): supporting lazy loading images --- components/image/demo/preview-group.ts | 17 +------- components/image/image.directive.ts | 54 ++++++++++++++++---------- 2 files changed, 35 insertions(+), 36 deletions(-) diff --git a/components/image/demo/preview-group.ts b/components/image/demo/preview-group.ts index 57af61072b1..1013b65f133 100644 --- a/components/image/demo/preview-group.ts +++ b/components/image/demo/preview-group.ts @@ -4,21 +4,8 @@ import { Component } from '@angular/core'; selector: 'nz-demo-image-preview-group', template: ` - - - + + ` }) diff --git a/components/image/image.directive.ts b/components/image/image.directive.ts index fbcc73e157c..93c2036b8c8 100644 --- a/components/image/image.directive.ts +++ b/components/image/image.directive.ts @@ -28,6 +28,7 @@ import { NzImageGroupComponent } from './image-group.component'; import { NzImageService } from './image.service'; const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'image'; +const INTERSECTION_THRESHOLD = 0.1; export type ImageStatusType = 'error' | 'loading' | 'normal'; export type nzLoading = 'eager' | 'lazy'; @@ -46,7 +47,7 @@ export class NzImageDirective implements OnInit, OnChanges, OnDestroy { @Input() nzSrc = ''; @Input() nzSrcset = ''; - @Input() nzLoading: nzLoading = 'lazy'; + @Input() nzLoading: nzLoading = 'eager'; @Input() @InputBoolean() @WithConfig() nzDisablePreview: boolean = false; @Input() @WithConfig() nzFallback: string | null = null; @Input() @WithConfig() nzPlaceholder: string | null = null; @@ -116,8 +117,8 @@ export class NzImageDirective implements OnInit, OnChanges, OnDestroy { ngOnChanges(changes: SimpleChanges): void { const { nzSrc } = changes; if (nzSrc) { - // this.getElement().nativeElement.src = nzSrc.currentValue; - // this.backLoad(); + this.getElement().nativeElement.src = nzSrc.currentValue; + this.backLoad(); } } @@ -129,32 +130,40 @@ export class NzImageDirective implements OnInit, OnChanges, OnDestroy { private backLoad(): void { this.backLoadImage = this.document.createElement('img'); this.backLoadImage.loading = this.nzLoading; - this.backLoadImage.setAttribute('loading', 'lazy'); - this.backLoadImage.src = this.nzSrc; - this.backLoadImage.srcset = this.nzSrcset; - this.backLoadImage.className = 'test'; + + if (this.nzLoading === 'eager') { + this.backLoadImage.src = this.nzSrc; + this.backLoadImage.srcset = this.nzSrcset; + } this.status = 'loading'; // unsubscribe last backLoad this.backLoadDestroy$.next(); this.backLoadDestroy$.complete(); this.backLoadDestroy$ = new Subject(); + if (this.backLoadImage.complete) { - this.status = 'normal'; - this.getElement().nativeElement.loading = this.nzLoading; - this.backLoadImage.setAttribute('loading', 'lazy'); - this.getElement().nativeElement.src = this.nzSrc; - this.getElement().nativeElement.srcset = this.nzSrcset; - this.getElement().nativeElement.className = 'test'; + if (this.nzLoading === 'lazy') { + const observer = new IntersectionObserver( + entries => { + entries.forEach(entry => { + if (entry.isIntersecting) { + this.backLoadCompleteStateHandler(); + observer.disconnect(); + } + }); + }, + { threshold: INTERSECTION_THRESHOLD } + ); + observer.observe(this.getElement().nativeElement); + } else { + this.backLoadCompleteStateHandler(); + } } else { if (this.nzPlaceholder) { - this.getElement().nativeElement.loading = this.nzLoading; - this.backLoadImage.setAttribute('loading', 'lazy'); this.getElement().nativeElement.src = this.nzPlaceholder; this.getElement().nativeElement.srcset = ''; } else { - this.getElement().nativeElement.loading = this.nzLoading; - this.backLoadImage.setAttribute('loading', 'lazy'); this.getElement().nativeElement.src = this.nzSrc; this.getElement().nativeElement.srcset = this.nzSrcset; } @@ -165,8 +174,6 @@ export class NzImageDirective implements OnInit, OnChanges, OnDestroy { .pipe(takeUntil(this.backLoadDestroy$), takeUntil(this.destroy$)) .subscribe(() => { this.status = 'normal'; - this.getElement().nativeElement.loading = this.nzLoading; - this.backLoadImage.setAttribute('loading', 'lazy'); this.getElement().nativeElement.src = this.nzSrc; this.getElement().nativeElement.srcset = this.nzSrcset; }); @@ -176,12 +183,17 @@ export class NzImageDirective implements OnInit, OnChanges, OnDestroy { .subscribe(() => { this.status = 'error'; if (this.nzFallback) { - this.getElement().nativeElement.loading = this.nzLoading; - this.backLoadImage.setAttribute('loading', 'lazy'); this.getElement().nativeElement.src = this.nzFallback; this.getElement().nativeElement.srcset = ''; } }); } } + + private backLoadCompleteStateHandler(): void { + this.status = 'normal'; + this.getElement().nativeElement.loading = this.nzLoading; + this.getElement().nativeElement.src = this.nzSrc; + this.getElement().nativeElement.srcset = this.nzSrcset; + } } From 20c42916edf6d0b101f16b2a19f9373baba54ca4 Mon Sep 17 00:00:00 2001 From: Parsa Arvaneh Date: Mon, 13 Nov 2023 01:47:17 +0330 Subject: [PATCH 3/6] feat(module:image): support lazy loading images --- components/image/doc/index.en-US.md | 66 ++++++++++++++--------------- components/image/doc/index.zh-CN.md | 63 +++++++++++++-------------- 2 files changed, 65 insertions(+), 64 deletions(-) diff --git a/components/image/doc/index.en-US.md b/components/image/doc/index.en-US.md index d18554af1ea..ab7caf53b1f 100644 --- a/components/image/doc/index.en-US.md +++ b/components/image/doc/index.en-US.md @@ -20,52 +20,52 @@ import { NzImageModule } from 'ng-zorro-antd/image'; ### [nz-image] -| Property | Description | Type | Default | Global Config | -| --- | --- | --- | --- | --- | -| nzSrc | Image path | `string` | - | - | -| nzFallback | Load failure fault-tolerant src | `string` | - | ✅ | -| nzPlaceholder | Load placeholder src | `string` | - | ✅ | -| nzDisablePreview | Whether to disable the preview | `boolean` | `false` | ✅ | -| nzCloseOnNavigation | Whether to close the image preview when the user goes backwards/forwards in history. Note that this usually doesn't include clicking on links (unless the user is using the HashLocationStrategy). | `boolean` | `false` | ✅ | -| nzDirection | Text directionality | `Direction` | `'ltr'` | ✅ | +| Property | Description | Type | Default | Global Config | +| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- | ------- | ------------- | +| nzSrc | Image path | `string` | - | - | +| nzFallback | Load failure fault-tolerant src | `string` | - | ✅ | +| nzPlaceholder | Load placeholder src | `string` | - | ✅ | +| nzDisablePreview | Whether to disable the preview | `boolean` | `false` | ✅ | +| nzCloseOnNavigation | Whether to close the image preview when the user goes backwards/forwards in history. Note that this usually doesn't include clicking on links (unless the user is using the HashLocationStrategy). | `boolean` | `false` | ✅ | +| nzDirection | Text directionality | `Direction` | `'ltr'` | ✅ | +| nzLoading | Image element's loading property. reference [loading property](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/loading) | `eager \| lazy` | `eager` | - | Other attributes [](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Attributes) - ### NzImageService -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| images | Preview images | `NzImage[]` | - | -| options | Preview options | `NzImagePreviewOptions` | - | +| Property | Description | Type | Default | +| -------- | --------------- | ----------------------- | ------- | +| images | Preview images | `NzImage[]` | - | +| options | Preview options | `NzImagePreviewOptions` | - | ## Related type definition ### NzImage -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| src | src | `string` | - | -| alt | alt | `string` | - | -| width | width | `string` | - | -| height | height | `string` | - | +| Property | Description | Type | Default | +| -------- | ----------- | -------- | ------- | +| src | src | `string` | - | +| alt | alt | `string` | - | +| width | width | `string` | - | +| height | height | `string` | - | ### NzImagePreviewOptions -| Property | Description | Type | Default | -| --- | --- | --- | --- | -| nzKeyboard | Whether support press `esc` to close, press `left` or `right` to switch image | `boolean` | `true` | -| nzMaskClosable | Whether to close the image preview when the mask (area outside the image) is clicked | `boolean` | `true` | -| nzCloseOnNavigation | Whether to close the image preview when the user goes backwards/forwards in history. Note that this usually doesn't include clicking on links (unless the user is using the HashLocationStrategy). | `boolean` | `true` | -| nzZIndex | The z-index of the image preview | `number` | 1000 | -| nzZoom | Zoom rate | `number` | 1 | -| nzRotate | Rotate rate | `number` | 0 | +| Property | Description | Type | Default | +| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- | +| nzKeyboard | Whether support press `esc` to close, press `left` or `right` to switch image | `boolean` | `true` | +| nzMaskClosable | Whether to close the image preview when the mask (area outside the image) is clicked | `boolean` | `true` | +| nzCloseOnNavigation | Whether to close the image preview when the user goes backwards/forwards in history. Note that this usually doesn't include clicking on links (unless the user is using the HashLocationStrategy). | `boolean` | `true` | +| nzZIndex | The z-index of the image preview | `number` | 1000 | +| nzZoom | Zoom rate | `number` | 1 | +| nzRotate | Rotate rate | `number` | 0 | ### NzImagePreviewRef -| Name | Description | -| --- | --- | -| switchTo(index: number): void | Switch to index | -| prev(): void | Previous image | -| next(): void | Next image | -| close(): void | Close image preview | +| Name | Description | +| ----------------------------- | ------------------- | +| switchTo(index: number): void | Switch to index | +| prev(): void | Previous image | +| next(): void | Next image | +| close(): void | Close image preview | diff --git a/components/image/doc/index.zh-CN.md b/components/image/doc/index.zh-CN.md index 2e8abf22ed9..f8a3c7b451e 100644 --- a/components/image/doc/index.zh-CN.md +++ b/components/image/doc/index.zh-CN.md @@ -21,51 +21,52 @@ import { NzImageModule } from 'ng-zorro-antd/image'; ### [nz-image] -| 参数 | 说明 | 类型 | 默认值 | 支持全局配置 | -| ----------- | ---------------------------------- | ---------------- | ------ | ----- | -| nzSrc | 图片地址 | `string` | - | - | -| nzFallback | 加载失败容错地址 | `string` | - | ✅ | -| nzPlaceholder | 加载占位地址 | `string` | - | ✅ | -| nzDisablePreview | 是否禁止预览 | `boolean` | `false` | ✅ | -| nzCloseOnNavigation | 当用户在历史中前进/后退时是否关闭预览。注意，这通常不包括点击链接（除非用户使用HashLocationStrategy）。 | `boolean` | `false` | ✅ | -| nzDirection | 文字方向 | `Direction` | `'ltr'` | ✅ | +| 参数 | 说明 | 类型 | 默认值 | 支持全局配置 | +| ------------------- | ---------------------------------------------------------------------------------------------------------------------------- | --------------- | ------- | ------------ | +| nzSrc | 图片地址 | `string` | - | - | +| nzFallback | 加载失败容错地址 | `string` | - | ✅ | +| nzPlaceholder | 加载占位地址 | `string` | - | ✅ | +| nzDisablePreview | 是否禁止预览 | `boolean` | `false` | ✅ | +| nzCloseOnNavigation | 当用户在历史中前进/后退时是否关闭预览。注意，这通常不包括点击链接（除非用户使用 HashLocationStrategy）。 | `boolean` | `false` | ✅ | +| nzDirection | 文字方向 | `Direction` | `'ltr'` | ✅ | +| nzLoading | 圖像元素的載入屬性。 reference [loading property](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/loading) | `eager \| lazy` | `eager` | - | 其他属性见 [](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Attributes) ### NzImageService -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| images | 预览图片 | `NzImage[]` | - | -| options | 预览参数 | `NzImagePreviewOptions` | - | +| 参数 | 说明 | 类型 | 默认值 | +| ------- | -------- | ----------------------- | ------ | +| images | 预览图片 | `NzImage[]` | - | +| options | 预览参数 | `NzImagePreviewOptions` | - | ## 相关类型定义 ### NzImage -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| src | src | `string` | - | -| alt | alt | `string` | - | -| width | 图片宽度 | `string` | - | -| height | 图片高度 | `string` | - | +| 参数 | 说明 | 类型 | 默认值 | +| ------ | -------- | -------- | ------ | +| src | src | `string` | - | +| alt | alt | `string` | - | +| width | 图片宽度 | `string` | - | +| height | 图片高度 | `string` | - | ### NzImagePreviewOptions -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| nzKeyboard | 是否支持键盘 esc 关闭、左右键切换图片 | `boolean` | `true` | -| nzMaskClosable | 点击蒙层是否允许关闭 | `boolean` | `true` | -| nzCloseOnNavigation | 当用户在历史中前进/后退时是否关闭预览。注意，这通常不包括点击链接（除非用户使用HashLocationStrategy）。 | `boolean` | `true` | -| nzZIndex | 设置预览层的 z-index | `number` | 1000 | -| nzZoom | 缩放比例 | `number` | 1 | -| nzRotate | 旋转角度 | `number` | 0 | +| 参数 | 说明 | 类型 | 默认值 | +| ------------------- | -------------------------------------------------------------------------------------------------------- | --------- | ------ | +| nzKeyboard | 是否支持键盘 esc 关闭、左右键切换图片 | `boolean` | `true` | +| nzMaskClosable | 点击蒙层是否允许关闭 | `boolean` | `true` | +| nzCloseOnNavigation | 当用户在历史中前进/后退时是否关闭预览。注意，这通常不包括点击链接（除非用户使用 HashLocationStrategy）。 | `boolean` | `true` | +| nzZIndex | 设置预览层的 z-index | `number` | 1000 | +| nzZoom | 缩放比例 | `number` | 1 | +| nzRotate | 旋转角度 | `number` | 0 | ### NzImagePreviewRef -| 名称 | 描述 | -| --- | --- | +| 名称 | 描述 | +| ----------------------------- | ------------ | | switchTo(index: number): void | 设置预览索引 | -| prev(): void | 上一张 | -| next(): void | 下一张 | -| close(): void | 关闭预览 | \ No newline at end of file +| prev(): void | 上一张 | +| next(): void | 下一张 | +| close(): void | 关闭预览 | From fc986d6e198d83509072d9e48157ef9ab255e8a3 Mon Sep 17 00:00:00 2001 From: Parsa Arvaneh Date: Mon, 13 Nov 2023 01:47:28 +0330 Subject: [PATCH 4/6] feat(module:image): support lazy loading images --- components/image/image.spec.ts | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/components/image/image.spec.ts b/components/image/image.spec.ts index b27616970ae..6da88564b54 100644 --- a/components/image/image.spec.ts +++ b/components/image/image.spec.ts @@ -106,6 +106,13 @@ describe('Basics', () => { fixture.detectChanges(); expect(image.src).toBe(SECOND_SRC); })); + + it('should the loading attribute be eager at default', fakeAsync(() => { + const image = debugElement.nativeElement.querySelector('img'); + context.nzImage.backLoadImage.dispatchEvent(new Event('load')); + fixture.detectChanges(); + expect(image.loading).toBe('eager'); + })); }); describe('Placeholder', () => { @@ -542,12 +549,13 @@ describe('Preview', () => { }); @Component({ - template: ` ` + template: ` ` }) export class TestImageBasicsComponent { @ViewChild(NzImageDirective) nzImage!: NzImageDirective; src = ''; placeholder: string | null = ''; + loading: 'eager' | 'lazy' = 'eager'; } @Component({ From aaecff16a122fd763526a71f109dc484e5007cb3 Mon Sep 17 00:00:00 2001 From: Parsa Arvaneh Date: Sun, 19 Nov 2023 02:27:26 +0330 Subject: [PATCH 5/6] feat(module:image): support lazy loading images --- components/image/image.directive.ts | 9 ++++----- components/image/image.spec.ts | 4 ++-- 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/components/image/image.directive.ts b/components/image/image.directive.ts index 223e0a6a0c2..1d07c1b1afa 100644 --- a/components/image/image.directive.ts +++ b/components/image/image.directive.ts @@ -34,7 +34,6 @@ const INTERSECTION_THRESHOLD = 0.1; export type ImageStatusType = 'error' | 'loading' | 'normal'; export type TImageUrl = string; export type TImageScaleStep = number; -export type nzLoading = 'eager' | 'lazy'; @Directive({ selector: 'img[nz-image]', @@ -50,7 +49,7 @@ export class NzImageDirective implements OnInit, OnChanges, OnDestroy { @Input() nzSrc = ''; @Input() nzSrcset = ''; - @Input() nzLoading: nzLoading = 'eager'; + @Input() nzLoading: 'eager' | 'lazy' = 'eager'; @Input() @InputBoolean() @WithConfig() nzDisablePreview: boolean = false; @Input() @WithConfig() nzFallback: string | null = null; @Input() @WithConfig() nzPlaceholder: string | null = null; @@ -137,7 +136,9 @@ export class NzImageDirective implements OnInit, OnChanges, OnDestroy { ngOnChanges(changes: SimpleChanges): void { const { nzSrc } = changes; if (nzSrc) { - this.getElement().nativeElement.src = nzSrc.currentValue; + if (this.nzLoading === 'eager') { + this.getElement().nativeElement.src = nzSrc.currentValue; + } this.backLoad(); } } @@ -149,7 +150,6 @@ export class NzImageDirective implements OnInit, OnChanges, OnDestroy { */ private backLoad(): void { this.backLoadImage = this.document.createElement('img'); - this.backLoadImage.loading = this.nzLoading; if (this.nzLoading === 'eager') { this.backLoadImage.src = this.nzSrc; @@ -212,7 +212,6 @@ export class NzImageDirective implements OnInit, OnChanges, OnDestroy { private backLoadCompleteStateHandler(): void { this.status = 'normal'; - this.getElement().nativeElement.loading = this.nzLoading; this.getElement().nativeElement.src = this.nzSrc; this.getElement().nativeElement.srcset = this.nzSrcset; } diff --git a/components/image/image.spec.ts b/components/image/image.spec.ts index c78694501aa..44c2e667e41 100644 --- a/components/image/image.spec.ts +++ b/components/image/image.spec.ts @@ -108,11 +108,11 @@ describe('Basics', () => { expect(image.src).toBe(SECOND_SRC); })); - it('should the loading attribute be eager at default', fakeAsync(() => { + it('should the loading attribute be auto at default', fakeAsync(() => { const image = debugElement.nativeElement.querySelector('img'); context.nzImage.backLoadImage.dispatchEvent(new Event('load')); fixture.detectChanges(); - expect(image.loading).toBe('eager'); + expect(image.loading).toBe('auto'); })); }); From 5c2bce4b8af3d9a9f75a4fe592b971450f6f4ec5 Mon Sep 17 00:00:00 2001 From: Laffery <49607541+Laffery@users.noreply.github.com> Date: Tue, 4 Jun 2024 20:36:23 +0800 Subject: [PATCH 6/6] Update index.zh-CN.md --- components/image/doc/index.zh-CN.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/image/doc/index.zh-CN.md b/components/image/doc/index.zh-CN.md index cb2007e1f4b..7c6a5c28e74 100644 --- a/components/image/doc/index.zh-CN.md +++ b/components/image/doc/index.zh-CN.md @@ -30,7 +30,7 @@ import { NzImageModule } from 'ng-zorro-antd/image'; | nzCloseOnNavigation | 当用户在历史中前进/后退时是否关闭预览。注意，这通常不包括点击链接（除非用户使用 HashLocationStrategy）。 | `boolean` | `false` | ✅ | | nzDirection | 文字方向 | `Direction` | `'ltr'` | ✅ | | nzScaleStep | `1 + nzScaleStep` 为缩放放大的每步倍数 | `number` | 0.5 | ✅ | -| nzLoading | 圖像元素的載入屬性。 reference [loading property](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/loading) | `eager \| lazy` | `eager` | - | +| nzLoading | 图片元素的加载属性。 参见 [HTMLImageElement.loading](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLImageElement/loading) | `eager \| lazy` | `eager` | - | 其他属性见 [](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Attributes)