jquery - `$container.imagesLoaded is not a function` 错误

Question

所以，我收到 $container.imagesLoaded is not a function 错误。

这是位于标题中的代码:

(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);

然后页脚有以下js文件:

    <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>

我有什么遗漏的吗？导致问题的文件位置是什么？

谢谢。

编辑 1

以下内容位于页脚，脚本由匿名函数传递。但仍然遇到同样的错误。

    <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 在 3.0.0 版本中从 Masonry 中分离出来。您必须单独包含它。 http://imagesloaded.desandro.com/