Forums Tout JavaScript

Bonjour à tous,

Je développe en ce moment un site de rencontre baptisé InterAmazones (mon premier vrai projet un peu ambitieux) et je bute sur l'affichage de la liste des profils. Pour l'instant je charge tout d'un coup, mais dès qu'il y a quelques centaines de profils avec photos, ça rame franchement côté navigateur.

Je voudrais passer sur un chargement progressif et j'hésite entre deux approches :
- un scroll infini classique avec un IntersectionObserver qui déclenche le fetch des profils suivants,
- ou une pagination "Charger plus" plus simple à maîtriser.

Pour ceux qui ont déjà fait ce genre de liste avec beaucoup de vignettes, qu'est-ce qui marche le mieux en pratique niveau perf et expérience utilisateur ? Et est-ce que vous préchargez les images du prochain lot, ou pas ?

Merci d'avance pour vos retours !

salut, perso jpartirais sur l'IntersectionObserver sans hésiter, une fois que t'as compris le truc c'est pas plus compliqué que le bouton charger plus et niveau feeling c'est quand meme plus fluide.

mais attention le vrai probléme c'est rarement le fetch en lui meme, c'est plutot le nombre de noeuds DOM + les images que tu balances d'un coup. meme avec du scroll infini si tu empile 800 cartes de profil dans la page au bout d'un moment ca rame pareil. deux trucs qui m'avais bien aidé : mettre loading="lazy" sur les balises img (le navigateur gére le chargement tout seul) et virer du DOM les profils qui sont sortis de l'ecran si t'en charge vraiment beaucoup.

t'es sur du vanilla pur ou t'as un framework derriere ? pck la stratégie change pas mal selon