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

fix(image,avatar): not trigger error event when set lazy only #5567

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

jizai1125
Copy link
Contributor

@jizai1125 jizai1125 commented Jan 9, 2024

closes #6110

lazy 配合 intersection-observer-options 配置,使用 observe 实现的懒加载存在问题;改动的思路考虑了以下两种情况:

  • 未指定视口元素 root:resolveOptionsAndHash 函数返回的 root 由 document.documentElement 改为了 document 根节点(应该要跟未指定 root 时一样吧,看了 w3c 的说明 intersectionobserver-intersection-root 未指定 root 默认也是 document 节点);否则如果采用 document.documentElement(指向 html 元素),html 元素的像素高度可能为 0(例如官方文档布局采用了绝对定位),导致 entry.isIntersecting 会永远为 true,图片不管是不是在浏览器视口内都会直接加载,采用 document 就解决了这个问题;
  • 指定了 root;则需要观察两个元素的可见性(与浏览器视口是否相交),一个是指定视口相对于浏览器视口的可见性,一个是图片相对于指定视口的可见性,当两个可见性都为 true 才去加载图片;否则当指定视口还未到达浏览器视口,而图片由于是相对于指定视口判断可见性,此时若图片跟指定视口已相交,就会直接加载,应该在指定视口到达浏览器视口且图片跟指定视口相交,再加载图片。

Copy link

vercel bot commented Jan 9, 2024

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

Name Status Preview Comments Updated (UTC)
naive-ui ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jan 12, 2025 2:47am

@codecov-commenter
Copy link

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (e77a145) 61.08% compared to head (8fede04) 61.08%.

❗ Your organization needs to install the Codecov GitHub app to enable full functionality.

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #5567   +/-   ##
=======================================
  Coverage   61.08%   61.08%           
=======================================
  Files        1107     1107           
  Lines       23618    23616    -2     
  Branches     6186     6184    -2     
=======================================
  Hits        14426    14426           
+ Misses       7598     7596    -2     
  Partials     1594     1594           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@jizai1125 jizai1125 changed the title fix(image&avatar): not trigger error event when set lazy only fix(image,avatar): not trigger error event when set lazy only Jan 24, 2024
@jizai1125 jizai1125 force-pushed the fix/Image-not-trigger-error-event-in-lazy branch from 8fede04 to df002c3 Compare January 24, 2024 13:02
@jizai1125 jizai1125 force-pushed the fix/Image-not-trigger-error-event-in-lazy branch from df002c3 to 6b9c9e3 Compare January 24, 2024 13:57
@jizai1125 jizai1125 force-pushed the fix/Image-not-trigger-error-event-in-lazy branch from fd30097 to a2c638c Compare July 12, 2024 01:52
@Immask-rgb
Copy link

大佬~这个问题是不是暂时还没修复

@jizai1125
Copy link
Contributor Author

大佬~这个问题是不是暂时还没修复

还没合进版本,等作者合😄

@Immask-rgb
Copy link

大佬~这个问题是不是暂时还没修复

还没合进版本,等作者合😄

好的捏

@Carseason
Copy link

依旧没有合并?

@jizai1125
Copy link
Contributor Author

jizai1125 commented Jan 11, 2025

依旧没有合并?

明天我同步下代码,再问问作者

@jizai1125
Copy link
Contributor Author

@07akioni 大佬什么时候有空看下这个修复

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.

n-image组件错误回调失效
4 participants