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(image):支持懒加载 #3096

Merged
merged 166 commits into from
Jun 19, 2022
Merged

Conversation

doom-9-zz
Copy link
Contributor

这种方案行不行

doom-9 and others added 30 commits June 17, 2021 17:42
@vercel
Copy link

vercel bot commented Jun 13, 2022

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated
naive-ui ✅ Ready (Inspect) Visit Preview Jun 19, 2022 at 7:06AM (UTC)

@codecov
Copy link

codecov bot commented Jun 13, 2022

Codecov Report

Merging #3096 (9ba60d0) into main (0a7181a) will decrease coverage by 0.10%.
The diff coverage is 40.00%.

❗ Current head 9ba60d0 differs from pull request most recent head 21bcc0d. Consider uploading reports for the commit 21bcc0d to get more accurate results

@@            Coverage Diff             @@
##             main    #3096      +/-   ##
==========================================
- Coverage   63.21%   63.10%   -0.11%     
==========================================
  Files        1012     1010       -2     
  Lines       20987    20988       +1     
  Branches     5460     5465       +5     
==========================================
- Hits        13267    13245      -22     
- Misses       6303     6331      +28     
+ Partials     1417     1412       -5     
Impacted Files Coverage Δ
src/image/src/utils.ts 27.77% <27.77%> (ø)
src/image/src/Image.tsx 81.81% <58.33%> (-5.46%) ⬇️
src/_mixins/use-rtl.ts 75.00% <0.00%> (-14.29%) ⬇️
src/space/src/Space.tsx 87.03% <0.00%> (-12.97%) ⬇️
src/config-provider/src/ConfigProvider.ts 41.30% <0.00%> (-4.35%) ⬇️
src/back-top/src/BackTop.tsx 60.22% <0.00%> (-2.70%) ⬇️
src/data-table/src/use-check.ts 72.58% <0.00%> (-0.56%) ⬇️
src/_internal/selection/src/Selection.tsx 41.07% <0.00%> (-0.27%) ⬇️
src/_utils/index.ts 100.00% <0.00%> (ø)
src/_utils/vue/index.ts 100.00% <0.00%> (ø)
... and 11 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 0a7181a...21bcc0d. Read the comment docs.

})

onBeforeUnmount(() => {
if (props.lazy) {
Copy link
Collaborator

Choose a reason for hiding this comment

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

如果一开始 lazy 最后不 lazy 就泄漏了

if (imgObserver === null) {
imgObserverOptions = {
root: document.querySelector(root),
threshold: 0.1
Copy link
Collaborator

Choose a reason for hiding this comment

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

可以考虑露一点就搞,不加缓冲


export const imgObserverHandler: (
el: HTMLImageElement | null,
unobserve: boolean,
Copy link
Collaborator

Choose a reason for hiding this comment

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

拆两个函数吧,两个名字

@@ -121,6 +143,7 @@ export default defineComponent({
style={[imgProps.style || '', { objectFit: this.objectFit }]}
data-error={this.showError}
data-preview-src={this.previewSrc || this.src}
data-src={this.showError ? this.fallbackSrc : this.src || imgProps.src}
Copy link
Collaborator

Choose a reason for hiding this comment

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

这块和上面那块看起来整体有点乱,能不能抽到 setup 算一下

@07akioni
Copy link
Collaborator

整体逻辑看起来挺合理的

@07akioni
Copy link
Collaborator

07akioni commented Jun 19, 2022

我后面研究了一下,原先那么做是不干净的,如果 options 变了、或者 dom 变了就会各种泄露,失效

写法需要调整

226a8d9


上一个也没搞干净

32cf3be


好的,这个终于干净了

cd80bcf

@07akioni 07akioni mentioned this pull request Jun 19, 2022
@doom-9-zz
Copy link
Contributor Author

学习学习

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.

5 participants