alibaba / alibaba/ice

ice-appear支持预加载

Open
#6,085 0 comments 0 reactions 0 assignees View on GitHub
rfc
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.