Body classnames manipulation during Barba.js transition

barba

barba.hooks.beforeEnter(({ next }) => {
  const parser = new DOMParser();
  const source = parser.parseFromString(next.html, "text/html");
  const body = source.querySelector('body');
  const classnames = body.getAttribute('class');
  
  console.log(classnames);
  
  if( classnames ) document.querySelector('body').setAttribute('class', classnames);
});

Barba n’est pas en mesure de savoir si les images de la page sont loader. Barba load le contenu html de la prochaine page et ensuite effectue la chaîne de transition en Promise. Regarde la librairie ImagesLoaded pour savoir quand les images de ta page sont toutes chargées. Inclus ton loader hors de ton barba-wrapper. Tu l’affiches durant le hook afterLeave et tu le cache dans beforeEnter. Le truc est de faire attendre ta transition tant que ImagesLoaded n’est pas terminé. On le fait dans tous nos projets et ça fonctionne à merveille. Ex: bien-joue.ca Bon dimanche Le dim. 2 août 2020 à 17:06, Simon Gauthier Boudreau < [email protected]> a écrit :

***@***.**** commented on this gist. ------------------------------ @ebhoren <https://github.com/ebhoren>, Je profites de tes connaissances avec Barba... Je me demandais où inclure un loader qui resterait actif tout le temps que le contenu de la prochaine page charge. Je load avec sync:true. En fait, est-ce que Barba est en mesure de savoir que tous les medias ont été loadé? comme les background-images? Merci encore, — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <https://gist.github.com/3a153fbe9d4d44a3b680f92c6f443471#gistcomment-3401391>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAEVZOW6USMP64SL6QEBJFLR6XIOTANCNFSM4PSXMYYQ> .

-- --------------------------------------------------------- *Dominic Mercier* Développeur Interactif Sénior --------------------------------------------------------- 2125 rue du Faubourg Drummondville, Québec, J2B 0H7 819.850.8340 --------------------------------------------------------- [email protected] dominic-mercier.com