justifyGallery break une fois rechargée

Question

J'utilise justifizedGallery pour ma page web. Quand je visite la page à la première fois, la galerie apparaît correctement. Mais quand je recharge la page, ça va casser.

J'utilise météore et réagir.

exemple de code ancien:

$(document).ready(() => { 
    $('#gallery').justifiedGallery({ 
    rowHeight: 400, 
    fixedHeight: false, 
    lastRow: 'justify', 
    margins: -3, 
    }); 
}); 

Je l'ai mis à jQuery fonction setTimeout().

setTimeout(function(){ 
    $('#gallery').justifiedGallery({ 
    rowHeight: 400, 
    fixedHeight: false, 
    lastRow: 'justify', 
    margins: -3, 
    }); 
}, 100); 

Maintenant, cela fonctionne très bien. J'ai juste besoin de savoir que c'est la bonne façon de le réparer? C'est pour la preuve du futur.

Answer 1

Vous ne devriez jamais exécuter le code qui manipule DOM globalement comme ça. Ce que vous obtenez est une condition de concurrence avec le rendu de modèle réel. Cela fonctionnera parfois de manière aléatoire, parfois de manière aléatoire, et se heurtera toujours à des collisions avec un moteur de template qui gênera au mieux les performances de l'application.

Déplacez la création de la galerie vers la méthode Template.onRendered() et utilisez this.$('.gallery') au lieu de seulement $('#gallery'). Si vous utilisez React, l'emplacement équivalent est la méthode componentDidMount du composant de présentation contenant la div .gallery.

---

Remarque: n'utilisez pas les identifiants pour la sélection d'un élément, l'utilisation de classes ou d'attributs de données. Les ID sont une mauvaise pratique car les composants que vous créez ne sont pas réutilisables et peuvent présenter des problèmes de performances.