La grille de maçonnerie ne charge pas

Question

Je me bats un peu - la grille de maçonnerie sur mon site ne se charge pas lors de la première visite de la page (ne charge que si je me rafraîchis à nouveau?) Toutes les images de la grille sont bien chargées , juste le script ne fonctionne pas.

vous pouvez voir sur la page d'accueil de ce site: http://moniquewilmoth.com

Answer 1

Votre page est de charger plusieurs versions de jquery (3.1.0 via googleapis-cdn, 3.1.1.from serveur local et 2.2.0 de cloudflare -CDN) et deux versions de maçonnerie (4.1.1 du serveur local et 4.2.0 via unpkg-CDN). Je pense que ces différentes versions sont en conflit les unes avec les autres et causent le problème. Importer seulement une (la plus récente) version de ces scripts et il devrait fonctionner. Dans mon cas, Masonry est en cours d'exécution en testant sur Chrome et Firefox sur Win 10, mais a échoué IE et Edge (mais a fonctionné à nouveau après avoir rechargé la page).

Si vous aviez l'intention des solutions de repli pour les versions locales CDN, regardez ici: How to load local script files as fallback in cases where CDN are blocked/unavailable?

Answer 2

Quelques questions. Vous chargez à la fois de l'isotope et de la maçonnerie. Ce sont des bibliothèques séparées. Les isotopes ont une disposition en maçonnerie mais ils ne sont pas utilisés ensemble. Retirez la bibliothèque « js/isotope docs.min.js » puis charger les fichiers js comme ceci:

<script src="js/jquery.min.js"></script> 
<script src="js/masonry.pkgd.min.js"></script> 
<script src="js/scripts.js"></script> 

Ensuite, vous appelez la maçonnerie deux fois avec le deuxième appel de ne pas avoir toutes les options définies:

var elem = document.querySelector('.grid'); 
    var msnry = new Masonry(elem, { 
    // options 
    itemSelector: '.grid-item', 
    columnWidth: '.grid-width', 
    stagger: 30, 
    }); 

    // element argument can be a selector string 
    // for an individual element 
    var msnry = new Masonry('.grid', { 
    // options 
    }); 

Modifier le code à ceci:

var elem = document.querySelector('.grid'); 
var msnry = new Masonry(elem, { 
// options 
itemSelector: '.grid-item', 
columnWidth: '.grid-width', 
    stagger: 30, 
}); 

Troisièmement, vous devriez envisager d'utiliser imagesloaded.js comme described here pour éviter l'image chevauche.