New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Re-introduce lazy loading for pictures #2367
Comments
Hi I've done some research on this
|
Hi I've done some research too, the layout shift happens because the browser does not know how much space should be reserved for the image, leading to layout shifts when the image is fully loaded. It seems like the solution that people generally use is specifying the height and width of the image, same as @yucheng11122017's third point. It allows the browser to reserve the correct space for the image before it is loaded. If we add the option of lazy/eager loading, maybe we can ask the users to input the height and width manually if they want lazy loading (and warn them about the consequences if they don't do so)? But I am not sure if it will be troublesome for them since not all users knows the exact height and width that they want What do y'all think? |
I agree with your proposal @LamJiuFong - thanks to you and @yucheng11122017 for investigating! I think instead of having to specify eager loading, we can have the users manually specify lazy loading if they want it. Then where we list in the documentation that lazy loading is supported, we can include that they should specify height and width manually to ensure scrolling to header works. Perhaps we can have an informational log pop up (similar to broken internal links) if this value is not specified. (I think even when exact desired height/width is not known - like resizing the image on different sized screens - specifying desired height and width will be enough for the browser to reserve the correct space) Do take this up if you are interested! |
Thank you @kaixin-hc for your suggestions! I will try to tackle this issue |
Please confirm that you have searched existing issues in the repo
Yes, I have searched the existing issues
Any related issues?
#2365, #1626, #2364
What is the area that this feature belongs to?
Author Usability, Reader Usability
Is your feature request related to a problem? Please describe.
See related issues for context.
TLDR: scrolling to anchor does not work as expected when there are lazily loaded images, hence we will remove existing lazy loading support.
Describe the solution you'd like
Add an option to specify eager/lazy loading of images,
https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading
Need to ensure scrolling still works.
Describe alternatives you've considered
No response
Additional context
No response
The text was updated successfully, but these errors were encountered: