codestates / codestates/triplus
[Error] 이미지 로딩 지연 에러
- Langage dominant
- JavaScript
- Étoiles
- 0
- Forks
- 4
- Métriques de merge des PR
- Aucune PR mergée en 30 j
Description
## 어떤 에러가 발생했나요?
- 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();
}, []);
```
Guide de contribution
Aucun guide de contribution indexé pour ce dépôt
Piste de recherche
Commencez dans GuideCard.jsx et examinez la logique existante de scroll debounce, setTimeout et getBoundingClientRect. Comparez-la avec l’exemple d’IntersectionObserver dans l’issue, puis vérifiez que le chargement des images n’entraîne plus le délai ni le reflow signalés pendant le défilement. Aucun fichier de test n’est mentionné ; validez donc le comportement dans la vue du navigateur concernée.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- javascript
- Domaine
- frontend, performance, web-dev
- Type d'issue
- Bug
- Difficulté
- 2/5
- Temps estimé
- 1-3 heures
- Activité
- À l'abandon
- Clarté
- Clairement spécifiée
- Accessibilité débutants
- 58/100