I'm struggling a bit – the masonry grid on my website isn't loading on the initial visit to the page (only loads if I refresh again?) All the images in the grid are loading fine, just the script isn't running.
you can view it on the homepage of this site: http://moniquewilmoth.com
Your page is loading multiple versions of jquery (3.1.0 via googleapis-cdn, 3.1.1.from local server and 2.2.0 from cloudflare-CDN) and two versions of masonry (4.1.1 from local server and 4.2.0 via unpkg-CDN).
I think, these different versions are in conflict with each other and causing the trouble. Import only one (the newest) version of these scripts and it should run.
In my case, Masonry is running by testing on Chrome and Firefox on Win 10, but failed IE and Edge (but worked again after reloading the page).
If you intended local fallbacks for CDN-versions, look here: How to load local script files as fallback in cases where CDN are blocked/unavailable?
A few issues. You are loading both isotope and masonry. They are separate libraries. Isotope has a masonry layout but they are not used together. Remove the library "js/isotope-docs.min.js" and then load the js files like this:
<script src="js/jquery.min.js"></script>
<script src="js/masonry.pkgd.min.js"></script>
<script src="js/scripts.js"></script>
Next you are calling masonry twice with the second call not having any options set:
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
});
Change the code to this:
var elem = document.querySelector('.grid');
var msnry = new Masonry( elem, {
// options
itemSelector: '.grid-item',
columnWidth: '.grid-width',
stagger: 30,
});
Third, is you should consider using imagesloaded.js as described hereto avoid image overlaps.
