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

feat: add img tag with loading attribute for lazy loading #1597

Merged
merged 1 commit into from
May 2, 2022

Conversation

hawtim
Copy link
Collaborator

@hawtim hawtim commented May 1, 2022

利用 loading 属性实现图片懒加载,避免几十几百个图片请求

@vercel
Copy link

vercel bot commented May 1, 2022

Someone is attempting to deploy a commit to a Personal Account owned by @qier222 on Vercel.

@qier222 first needs to authorize it.

Copy link
Collaborator Author

@hawtim hawtim left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

double checked

@memorydream
Copy link
Collaborator

感觉一些在单个页面几乎一定会被看到的图片不需要使用lazy loading,比如私人FM的封面、每日推荐的封面、Navbar上的用户头像、歌手页里的歌手头像...这样的地方

@hawtim
Copy link
Collaborator Author

hawtim commented May 2, 2022

感觉一些在单个页面几乎一定会被看到的图片不需要使用lazy loading,比如私人FM的封面、每日推荐的封面、Navbar上的用户头像、歌手页里的歌手头像...这样的地方

其实这些地方用懒加载问题不大,loading 属性通过判断图片在 viewport 之外的来优化关键渲染路径,只有有可能出现在屏幕之外,比如视图缩小(比如 electron 的 800 * 600 再打开 devtools),都可以让其懒加载,来优化资源请求和页面渲染的速度

@hawtim
Copy link
Collaborator Author

hawtim commented May 2, 2022

一个额外的问题是,electron 似乎还不支持这个属性。我研究下。

@hawtim
Copy link
Collaborator Author

hawtim commented May 2, 2022

一个额外的问题是,electron 似乎还不支持这个属性。我研究下。

Sry,我打包失败导致的问题,发现是支持的。

个人账号原本进个人主页要 1400 多个 request,现在只要 80 多个,提升效果还可以。

@hawtim hawtim merged commit 8cd8ae4 into qier222:master May 2, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants