0

I use loading="lazy" on all offscreen images including footer images. I try this with Client Side Rendering As well as with Server-side Rendering(Angular Universal).

But all the images load initially without scrolling.

<img src="{{product.featured_image.mobile}}" alt="" loading="lazy" width="100" height="100">
Improve this question
5
  • 1
    Maybe this will give some more insights? stackoverflow.com/questions/57753240/… Commented Jul 21, 2022 at 19:13
  • Its a browser dependent behaviour, try changing your browser, you may see a difference Commented Jul 21, 2022 at 19:15
  • I have checked this in chrome and firefox. It didn't work. I have used the same approach on the WordPress website. It works in WordPress. This is strange but that's not working for me in Angular. Commented Jul 21, 2022 at 19:19
  • When you look at the generated source, is the loading attr still there? Commented Jul 21, 2022 at 19:55
  • @MikeOne Yes. The loading attribute is still there. Commented Jul 23, 2022 at 12:26

1 Answer 1

Reset to default
0 
<img [lazyLoad]="product.featured_image.mobile || ''" loading="lazy" width="100" height="100"/>
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thank you for contributing to the Stack Overflow community. This may be a correct answer, but it’d be really useful to provide additional explanation of your code so developers can understand your reasoning. This is especially useful for new developers who aren’t as familiar with the syntax or struggling to understand the concepts. Would you kindly edit your answer to include additional details for the benefit of the community?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.