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/

Answer 2

页面中嵌入的任何代码都必须引用上面已引用的代码。将代码放在脚本标记之后，它应该可以正常工作。

让你的页脚看起来像这样：

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

基本上.imagesLoaded和.infiniteScroll不存在，直到加载了包含其定义的脚本。这通过脚本标签在浏览器中发生。

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

2 个答案: