fix: 修复 Image 组件开启 lazy 后在 fixed 定位容器下检查交叉异常的问题
#820
Conversation
Walkthrough此次更改在 Changes
Possibly related PRs
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (1)
packages/hooks/src/utils/lazyload.ts (1)
Line range hint
74-91: 建议考虑增强容器管理机制当前的实现解决了固定定位容器的问题，但从长远来看，建议考虑以下优化方向：
- 实现容器类型的优先级管理系统
- 添加容器变更的监听机制
- 考虑缓存常用容器的引用以提升性能
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (2)
packages/hooks/src/utils/dom/element.tsx(2 hunks)packages/hooks/src/utils/lazyload.ts(3 hunks)
🔇 Additional comments (4)
packages/hooks/src/utils/lazyload.ts (2)
2-2: 导入新的工具函数以支持固定定位容器的检测
新增的 getClosestFixedContainer 导入符合修复目标，用于解决固定定位容器中的懒加载检测问题。
74-75: 优化 IntersectionObserver 的根元素设置逻辑
实现方案合理，通过 getClosestFixedContainer 正确处理了固定定位容器的场景。建议验证容器优先级是否符合预期。
Also applies to: 88-88
✅ Verification successful
Let me check the implementation of getClosestFixedContainer and the container precedence logic.
Let me check how the fixedContainer is used in the IntersectionObserver configuration.
IntersectionObserver 的容器优先级设置正确
根据代码实现，容器的优先级逻辑完全符合预期：
getClosestFixedContainer正确实现了对固定定位容器的查找- 在 IntersectionObserver 配置中，
fixedContainer优先于container使用 - 当两者都不存在时，默认使用视口作为根容器
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 检查是否存在其他使用 IntersectionObserver 的相关代码
rg -l "IntersectionObserver" --type ts
# 检查是否有相关测试用例
fd -e test.tsx -e test.ts -e spec.tsx -e spec.ts
Length of output: 3543
Script:
#!/bin/bash
# 检查 getClosestFixedContainer 的实现
ast-grep --pattern 'function getClosestFixedContainer($_) { $$$ }'
# 检查 lazyload.ts 中的容器优先级逻辑
rg -A 10 "const \{ container = null, element" packages/hooks/src/utils/lazyload.ts
Length of output: 2006
Script:
#!/bin/bash
# 检查 IntersectionObserver 的配置
rg -A 15 "new IntersectionObserver\(" packages/hooks/src/utils/lazyload.ts
Length of output: 467
packages/hooks/src/utils/dom/element.tsx (2)
116-122: 代码格式调整提高了可读性
返回语句的重新格式化使条件判断更清晰易读。
143-164: 新增的 getClosestFixedContainer 函数实现合理
函数实现符合以下要点：
- 与现有的
getClosestScrollContainer保持一致的代码风格 - 正确处理了空值情况
- 实现简洁且职责单一
建议考虑以下优化：
export function getClosestFixedContainer(element: Element | HTMLElement | null) {
if (!element) {
return null;
}
const isFixable = (el: HTMLElement) => {
const style = window.getComputedStyle(el);
- return style.position === 'fixed';
+ // 缓存计算样式以提高性能
+ const { position } = style;
+ return position === 'fixed';
};
// 遍历父元素
let parent = element.parentElement;
while (parent) {
if (isFixable(parent)) {
return parent;
}
parent = parent.parentElement;
}
return null;
}另外，建议验证此函数在各种 DOM 结构下的行为是否符合预期。
✅ Verification successful
Let me check the CSS file to understand the usage context better.
Let me check the usage context in lazyload.ts to understand how the function is being used.
getClosestFixedContainer 函数实现合理且使用场景明确
通过代码分析，该函数在 lazyload.ts 中被用于 IntersectionObserver 的配置中，用于确定正确的滚动容器。实现符合以下要点：
- 正确处理了 fixed 定位元素作为 IntersectionObserver 的 root 容器
- 与现有代码风格保持一致
- 实现简洁且职责单一
关于性能优化的建议可以保留，但不是必需的，因为：
- 该函数仅在初始化 IntersectionObserver 时调用一次
- 遍历的层级通常较少
getComputedStyle的性能开销在此场景下可以接受
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# 搜索代码库中可能的边界情况
rg -l 'position:\s*fixed' --type css
Length of output: 79
Script:
#!/bin/bash
# Check the content of the CSS file
cat packages/ssr-test/styles/Home.module.css
# Also search for any tests or usage of getClosestFixedContainer
rg "getClosestFixedContainer" -A 3
Length of output: 4824
Script:
#!/bin/bash
# Check the implementation context in lazyload.ts
cat packages/hooks/src/utils/lazyload.ts
# Also check for any tests
fd -e test.tsx -e test.ts -e spec.tsx -e spec.ts lazyload
Length of output: 3307
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (1)
packages/shineout/src/image/__doc__/changelog.cn.md (1)
4-6: Bug修复描述完整且清晰修复描述准确反映了PR的目标，并正确链接到相关PR #820。建议补充一下具体的使用场景，以帮助用户更好地理解此修复的适用情况。
建议将描述扩展为：
- 修复 `Image` 组件开启 `lazy` 后在 fixed 定位容器下检查交叉异常的问题 + 修复 `Image` 组件开启 `lazy` 后，当图片位于 position: fixed 定位的容器内时，无法正确触发懒加载的问题
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (2)
package.json(1 hunks)packages/shineout/src/image/__doc__/changelog.cn.md(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- package.json
🔇 Additional comments (2)
packages/shineout/src/image/__doc__/changelog.cn.md (2)
1-3: 版本号格式规范且日期记录准确
版本号和发布日期的格式符合项目规范。
1-6: 变更日志与PR目标保持一致
变更记录完整地体现了PR的修复目标，包含了受影响的组件、功能特性和具体问题描述。
Types of changes
Changelog
Image组件开启lazy后在 fixed 定位容器下检查交叉异常的问题Playground id
21b3032e-6f51-418b-97ad-a0e02d2da125
Other information
Summary by CodeRabbit
新功能
getClosestFixedContainer函数，优化懒加载机制，提升交叉观察器的准确性。Image组件新增inViewOnly功能，允许仅在视口内加载图像。错误修复
Image组件在启用懒加载时与固定定位容器的交叉错误。版本更新
3.5.2-beta.10。