javascriptjqueryjquery-masonrymasonryimagesloaded

mmasonry.pkgd.js:62 cannot call methods on masonry prior to initialization; attempted to call 'reload'

Question

How should I either modify my script to initialize Masonry, or rearrange the order of my scripts.

Background

I have had similar issues on other websites I created, but currently having it on a Tumblr theme I am building at http://divedemo.tumblr.com/

I was testing the theme. The result of the error is that the images are stacked too closely together. My previous research said that it was due to the boxes not having a set height. But the solutions that I have found so far do not account for responsive websites.

I went into the console to see what was happening

mmasonry.pkgd.js:62 cannot call methods on masonry prior to initialization; attempted to call 'reload'

Error (screenshot)

enter image description here

Javascript

    <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.0/imagesloaded.pkgd.min.js"></script>
    <script>
        $(document).ready(function() {

            // Initialize Masonry
            $('#content').masonry({
                columnWidth: 320,
                itemSelector: '.item',
                isFitWidth: true,
                isAnimated: !Modernizr.csstransitions
            }).imagesLoaded(function() {
                $(this).masonry('reload');
            });

        });
    </script>
Solution

  • Try this,

    $(document).ready(function() {
    $('#content').imagesLoaded(function() {
        $('#content').masonry({
            columnWidth: 320,
            itemSelector: '.item',
            isFitWidth: true
        })
    });
});

    http://masonry.desandro.com/faq.html#error-cannot-call-methods-on-masonry-prior-to-initialization-attempted-to-call-___