feat(module:image): support lazy loading for image component #8157

ParsaArvanehPA · 2023-11-12T22:21:00Z

PR Checklist

Please check if your PR fulfills the following requirements:

[✔] The commit message follows our guidelines: https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/CONTRIBUTING.md#commit
[✔] Tests for the changes have been added (for bug fixes / features)
[✔] Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

[ ] Bugfix
[✔] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] Application (the showcase website) / infrastructure changes
[ ] Other... Please describe:

What is the current behavior?

Currently when you add loading='lazy' to an image, it doesn't work as intended. It loads the image like as the page is loaded.

Issue Number: N/A

What is the new behavior?

Now if you add nzLoading='lazy', the image is only loaded when image is in viewport.

Does this PR introduce a breaking change?

[ ] Yes
[✔] No

Other information

zorro-bot · 2023-11-12T22:21:19Z

This preview will be available after the AzureCI is passed.

codecov · 2023-11-12T22:30:25Z

Codecov Report

Attention: 7 lines in your changes are missing coverage. Please review.

Comparison is base (7c79ab3) 91.70% compared to head (aaecff1) 91.66%.

Files	Patch %	Lines
components/image/image.directive.ts	65.00%	6 Missing and 1 partial ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #8157      +/-   ##
==========================================
- Coverage   91.70%   91.66%   -0.04%     
==========================================
  Files         519      519              
  Lines       17885    17899      +14     
  Branches     2747     2751       +4     
==========================================
+ Hits        16402    16408       +6     
- Misses       1181     1188       +7     
- Partials      302      303       +1

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

HyperLife1119 · 2023-11-13T16:37:21Z

Should we consider using <img loading="lazy" /> directly?
https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/loading

NgOptimizedImage also uses the same technique
https://angular.io/api/common/NgOptimizedImage#instance-properties

ParsaArvanehPA · 2023-11-13T21:26:41Z

Should we consider using <img loading="lazy" /> directly? https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/loading

NgOptimizedImage also uses the same technique https://angular.io/api/common/NgOptimizedImage#instance-properties

Unfortunately, this method is ineffective. The reason is that in image.directive.ts, the image element is created using document.createElement('img'). Once the element is created, its src attribute is immediately assigned, triggering the browser to download it. I attempted to set its loading attribute before setting its src, but it did not enable lazy loading.

I implement a manual approach to verify when the newly created img element appears in the viewport. I utilize IntersectionObserver, which ensures a high performance.
When the img element enters the viewport, its src attribute is assigned, causing it to be downloaded by the browser.

simplejason · 2023-11-16T02:19:01Z

Thanks for your contribution :) @ParsaArvanehPA This year we applied for some free licenses from Jetbrains(valid until Nov 14, 2024, it can be activated in All Products Pack of Jetbrains), please contact me if you need it, I've sent you a notification to your email!

ParsaArvanehPA · 2023-11-16T09:40:26Z

Thanks for your contribution :) @ParsaArvanehPA This year we applied for some free licenses from Jetbrains(valid until Nov 14, 2024, it can be activated in All Products Pack of Jetbrains), please contact me if you need it, I've sent you a notification to your email!

Hi Jason,

Thank you so much for your wonderful message and your generous offer. I am very happy and honored to be part of the ng-zorro-antd open source community. I enjoy working on this project and I am glad that my code has been useful and helpful.

I am very grateful for the license from JetBrains that you have applied for me. This is a very valuable and thoughtful gift, and I appreciate your kindness and generosity. I have registered an account on JetBrains with my email address, and I've sent you my account info via email.

I look forward to using JetBrains products and continuing to support our ng-zorro-antd community. Thank you again for your support!

simplejason

Just left some small nits :)

simplejason · 2023-11-18T12:52:06Z

components/image/image.directive.ts

@@ -45,6 +47,7 @@ export class NzImageDirective implements OnInit, OnChanges, OnDestroy {

  @Input() nzSrc = '';
  @Input() nzSrcset = '';
+  @Input() nzLoading: nzLoading = 'eager';


type nzLoading can be removed.

-- @Input() nzLoading: nzLoading = 'eager'; ++ @Input() nzLoading?: 'eager' | 'lazy';

simplejason · 2023-11-18T12:55:14Z

components/image/image.directive.ts

+
+  private backLoadCompleteStateHandler(): void {
+    this.status = 'normal';
+    this.getElement().nativeElement.loading = this.nzLoading;


This attribute loading is not supported by chrome browsers lower than version 77, so it's better to not add it if nzLoadingType is not set. (https://caniuse.com/?search=eager)

I apologize for the delay.
This could be removed entirely, as setting the image element's lazy loading does not produce the desired outcome.

…component # Conflicts: # components/image/doc/index.en-US.md # components/image/doc/index.zh-CN.md # components/image/image.directive.ts

ParsaArvanehPA · 2023-11-27T22:23:49Z

Greetings @simplejason,
I am wondering if you have had a chance to look at the changes I made to my pull request based on your comments. I have been waiting for your feedback and approval for some time now. Is there anything else I need to do to move this process forward? Please let me know as soon as possible. Thank you for your time and assistance.

ParsaArvanehPA added 4 commits November 11, 2023 17:10

feat(module:image): supporting lazy loading images

b70791f

feat(module:image): supporting lazy loading images

e992f21

feat(module:image): support lazy loading images

20c4291

feat(module:image): support lazy loading images

fc986d6

simplejason changed the title ~~Feature/support lazy loading for image component~~ feature(module:image): support lazy loading for image component Nov 13, 2023

simplejason added the PR: target-major label Nov 13, 2023

HyperLife1119 changed the title ~~feature(module:image): support lazy loading for image component~~ feat(module:image): support lazy loading for image component Nov 17, 2023

simplejason requested changes Nov 18, 2023

View reviewed changes

ParsaArvanehPA added 2 commits November 19, 2023 01:58

Merge branch 'master' into feature/supporting-lazy-loading-for-image-…

3d13926

…component # Conflicts: # components/image/doc/index.en-US.md # components/image/doc/index.zh-CN.md # components/image/image.directive.ts

feat(module:image): support lazy loading images

aaecff1

ParsaArvanehPA requested a review from simplejason November 20, 2023 22:28

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(module:image): support lazy loading for image component #8157

feat(module:image): support lazy loading for image component #8157

ParsaArvanehPA commented Nov 12, 2023

zorro-bot bot commented Nov 12, 2023

codecov bot commented Nov 12, 2023 •

edited

HyperLife1119 commented Nov 13, 2023 •

edited

ParsaArvanehPA commented Nov 13, 2023 •

edited

simplejason commented Nov 16, 2023

ParsaArvanehPA commented Nov 16, 2023

simplejason left a comment

simplejason Nov 18, 2023

ParsaArvanehPA Nov 18, 2023

simplejason Nov 18, 2023

ParsaArvanehPA Nov 18, 2023

ParsaArvanehPA commented Nov 27, 2023

feat(module:image): support lazy loading for image component #8157

Are you sure you want to change the base?

feat(module:image): support lazy loading for image component #8157

Conversation

ParsaArvanehPA commented Nov 12, 2023

PR Checklist

PR Type

What is the current behavior?

What is the new behavior?

Does this PR introduce a breaking change?

Other information

zorro-bot bot commented Nov 12, 2023

codecov bot commented Nov 12, 2023 • edited

Codecov Report

HyperLife1119 commented Nov 13, 2023 • edited

ParsaArvanehPA commented Nov 13, 2023 • edited

simplejason commented Nov 16, 2023

ParsaArvanehPA commented Nov 16, 2023

simplejason left a comment

Choose a reason for hiding this comment

simplejason Nov 18, 2023

Choose a reason for hiding this comment

ParsaArvanehPA Nov 18, 2023

Choose a reason for hiding this comment

simplejason Nov 18, 2023

Choose a reason for hiding this comment

ParsaArvanehPA Nov 18, 2023

Choose a reason for hiding this comment

ParsaArvanehPA commented Nov 27, 2023

codecov bot commented Nov 12, 2023 •

edited

HyperLife1119 commented Nov 13, 2023 •

edited

ParsaArvanehPA commented Nov 13, 2023 •

edited