codestates / codestates/triplus
[Error] 이미지 로딩 지연 에러
- Lingua principale
- JavaScript
- Stelle
- 0
- Fork
- 4
- Metriche di merge delle PR
- Nessuna PR unita negli ultimi 30g
Descrizione
## 어떤 에러가 발생했나요?
- debounce로 인한 이미지 로딩 지연과 reflow 현상 발생
### 에러가 발생한 폴더
- GuideCard.jsx
### 에러 메시지
- debounce로 인한 이미지 로딩 지연과 reflow 현상 발생
### 에러 원인
- setTimeout으로 scroll 이벤트를 감소시키려고 하였지만, 이는 이미지 지연 딜레이를 발생시킴.
- getBoundingClientRect로 인한 reflow 현상 발생
### 에러 해결 방법
이를 해결하고자 intersectionObserver API로 리팩토링 진행
```
useEffect(() => {
const interObserver = new IntersectionObserver(callback, option);
if (cardRef.current) interObserver.observe(cardRef.current);
return () => interObserver.disconnect();
}, []);
```
Guida per i contributori
Nessuna guida per i contributori indicizzata per questo repository
Direzione di ricerca
Inizia da GuideCard.jsx e ispeziona la logica esistente di scroll debounce, setTimeout e getBoundingClientRect. Confrontala con l’esempio di IntersectionObserver nell’issue, quindi verifica che il caricamento delle immagini non provochi più il ritardo né il reflow segnalati durante lo scorrimento. Non è menzionato alcun file di test, quindi valida il comportamento nella vista del browser pertinente.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- javascript
- Ambito
- frontend, performance, web-dev
- Tipo di issue
- Bug
- Difficoltà
- 2/5
- Tempo stimato
- 1-3 ore
- Stato di attività
- Ferma
- Chiarezza
- Specificata chiaramente
- Idoneità per principianti
- 58/100