ice-appear支持预加载
- Dominant language
- TypeScript
- Stars
- 18.6k
- Forks
- 2.1k
- PR merge metrics
- No merged PRs in 30d
Description
### Summary | 概述
在appear-polyfill中做了预加载功能,针对图片可以做到比懒加载体验更好(没有白屏)
### Motivation | 背景
需要针对长列表做性能优化,但不希望图片懒加载影响到用户使用体验
### Usage example | 使用示例
import VisibilityChange from '@ice/appear';
export default function Home() {
return (
{
console.log('Something has been shown.')
}}
onPreappear={() => {
console.log('Something has disappeard.')
}}
onDisappear={() => {
console.log('Something has disappeard.')
}}
>
Anything you want to show.
);
}
### Detailed design | 方案设计
1. 支持配置 intersectionObserver 的 api
2. 如果开发者配置了 preLoad 参数,则额外新建一个 observer 实例,收集 pre-appear 事件传入的函数,按需触发
### Additional context | 额外信息
_No response_
Contributor guide
Research direction
Start with the appear-polyfill implementation exposed as @ice/appear and inspect the VisibilityChange component's existing IntersectionObserver configuration and appear/disappear callbacks. Trace how the proposed preLoad option should create a separate observer and invoke onPreappear for the usage example, then verify the documented callback behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100