Skip to content
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

帖子内联图片的抖动问题 #31

Closed
zgq354 opened this issue Sep 24, 2021 · 2 comments
Closed

帖子内联图片的抖动问题 #31

zgq354 opened this issue Sep 24, 2021 · 2 comments
Labels
enhancement New feature or request
Projects

Comments

@zgq354
Copy link
Member

zgq354 commented Sep 24, 2021

现象:
直接打开指向某楼层的链接,途中因为浏览器正在下载前面楼层的帖子的图片,帖子发生高度变化,从而使得页面发生抖动,导致滚动位置不精确

解决思路:
数据库增加帖子高度的额外字段,提交帖子时检测图片的高度并保存,再在渲染时指定容器的 min-height

@zgq354 zgq354 added the enhancement New feature or request label Sep 24, 2021
@zgq354 zgq354 added this to Long term in 0xFFFF Dev Sep 24, 2021
@zgq354
Copy link
Member Author

zgq354 commented Apr 29, 2023

一个比较骚的思路:
监听帖子的 img onload 事件,然后再重新触发楼层跳转

@zgq354
Copy link
Member Author

zgq354 commented May 27, 2023

改好了,这里没有采用上述的办法:
而是借助 image 的 width / height 属性,指定完整的 width / height 来固定住 img 的 aspect ratio,避免 loading 过程中发生偏移。

思路:

  1. 在 formatter render 之前,补充 width / height 属性
  2. 利用 cache 和 queue 异步获取帖子图片的 width / height

细节:

  1. 安全考虑:增加一个 fetchImageSizeAllowList 的白名单,只有指定域名才走这里的优化策略
  2. 指定了 width / height 后,max-width: 100% 情况会变形,这里为 img 补充 height: auto 样式来补偿

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
0xFFFF Dev
Long term
Development

No branches or pull requests

1 participant