`$container.imagesLoaded is not a function` error

Question

So, I am getting $container.imagesLoaded is not a function error.

Here is the code which is located in header:

(function ($, root, undefined) {

    $(function () {

    'use strict';
    ////

    var $container = $('.grid');

        $container.imagesLoaded(function(){
          $container.masonry({
            itemSelector: '.grid-item',
            columnWidth: 100
          });
        });

        $container.infinitescroll({
          navSelector  : '#rh_nav_below',   
          nextSelector : '#rh_nav_below .rh_nav_next a',  
          itemSelector : '.grid-item',   
          loading: {
              finishedMsg: 'No more pages to load.',
              img: 'http://i.imgur.com/6RMhx.gif'
            }
          },             
          function( newElements ) {             
            var $newElems = $( newElements ).css({ opacity: 0 });               
            $newElems.imagesLoaded(function(){                
              $newElems.animate({ opacity: 1 });
              $container.masonry( 'appended', $newElems, true ); 
            });
          }
        );      

    ////

});

})(jQuery, this);

Then the footer has following js files:

    <script type="text/javascript" src="http://example.com/js/masonry.pkgd.min.js"></script>
    <script type="text/javascript" src="http://example.com/jquery.infinitescroll.min.js"></script>

Is there something I am missing? is the location of file that's causing the problem?

Thank you.

EDIT 1

Followings are located at the footer and script is passed by anonymous function. But still getting same error.

    <script type="text/javascript" src="http://example.com/js/masonry.pkgd.min.js"></script>
    <script type="text/javascript" src="http://example.com/jquery.infinitescroll.min.js"></script>
    <script type="text/javascript">
    (function($) {
        var $container = $('.grid');

            $container.imagesLoaded(function(){
              $container.masonry({
                itemSelector: '.grid-item',
                columnWidth: 100
              });
            });

            $container.infinitescroll({
              navSelector  : '#rh_nav_below',   
              nextSelector : '#rh_nav_below .rh_nav_next a',  
              itemSelector : '.grid-item',   
              loading: {
                  finishedMsg: 'No more pages to load.',
                  img: 'http://i.imgur.com/6RMhx.gif'
                }
              },             
              function( newElements ) {             
                var $newElems = $( newElements ).css({ opacity: 0 });               
                $newElems.imagesLoaded(function(){                
                  $newElems.animate({ opacity: 1 });
                  $container.masonry( 'appended', $newElems, true ); 
                });
              }
            );      
    })(jQuery);
    </script>

Answer 1

imagesLoaded was unbundled from Masonry in version 3.0.0. You'll have to include it separately. http://imagesloaded.desandro.com/

Answer 2

Any code embedded in the page must reference code already referenced above it. Put your code after the script tags and it ought to work.

Make your footer look like this:

<script type="text/javascript" src="http://example.com/js/masonry.pkgd.min.js"></script>
<script type="text/javascript" src="http://example.com/jquery.infinitescroll.min.js"></script> 
<script> 
(function ($, root, undefined) {

    $(function () {

    'use strict';
    ////

    var $container = $('.grid');

        $container.imagesLoaded(function(){
          $container.masonry({
            itemSelector: '.grid-item',
            columnWidth: 100
          });
        });

        $container.infinitescroll({
          navSelector  : '#rh_nav_below',   
          nextSelector : '#rh_nav_below .rh_nav_next a',  
          itemSelector : '.grid-item',   
          loading: {
              finishedMsg: 'No more pages to load.',
              img: 'http://i.imgur.com/6RMhx.gif'
            }
          },             
          function( newElements ) {             
            var $newElems = $( newElements ).css({ opacity: 0 });               
            $newElems.imagesLoaded(function(){                
              $newElems.animate({ opacity: 1 });
              $container.masonry( 'appended', $newElems, true ); 
            });
          }
        );      

    ////

}); 
</script>

Essentially .imagesLoaded and .infiniteScroll don't exists until the script containing their definition has been loaded. This happens in a browser via script tags.