jQuery `$container.imagesLoaded 不是函数` 错误

`$container.imagesLoaded is not a function` error

提问by Emily Turcato

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

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

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:

然后页脚有以下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>

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

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

Thank you.

谢谢你。

EDIT 1

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

回答by Clayton Leis

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

imagesLoaded 在 3.0.0 版中从 Masonry 中分离出来。您必须单独包含它。http://imagesloaded.desandro.com/

回答by Antony Koch

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.

基本上 .imagesLoaded 和 .infiniteScroll 在包含它们定义的脚本被加载之前不存在。这通过脚本标签在浏览器中发生。