Filtrage isotopique - espacement anormal au chargement seulement

Question

Je fais de la maintenance sur un site PHP qui utilise le filtrage Isotope, et j'apprends encore Javascript. Pour cette raison, je n'arrive pas à résoudre un problème avec Isotope.

J'ai une page avec 40 tuiles dans deux sections séparées. Une des sections fonctionne correctement sans erreurs. Mais dans la deuxième section, quand je charge la page, elle affiche les 10-12 dernières cases les unes sur les autres (elle varie, apparemment de manière aléatoire). Cependant, chaque fois que je clique sur l'un des filtres, cela fonctionne bien et les pousse à l'espacement approprié. Ainsi, le problème concerne uniquement le comportement lors du chargement initial de la page.

Est-ce que quelqu'un sait ce qui pourrait causer ce genre de problème?

Answer 1

Essayez de remplacer document.ready par window.load, ce qui vous fera attendre le téléchargement des images avant de lancer l'isotope.

$(document).ready(function() { 
    // executes when HTML-Document is loaded and DOM is ready 
    $.isotope(); 
}); 

$(window).load(function() { 
    // executes when complete page is fully loaded, including all frames, objects and images 
$.isotope(); 
}); 

En fait, en lisant le lien 3rror404 affiché, vous pouvez faire

// layout Isotope again after all images have loaded 
$container.imagesLoaded(function() { 
    $container.isotope('layout'); 
});