`$ container.imagesLoaded不是函数`错误 [英] `$container.imagesLoaded is not a function` error

问题描述

所以，我收到$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);

然后页脚具有以下js文件:

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?

谢谢.

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

推荐答案

imagesLoaded在3.0.0版中与Masonry无关.您必须单独包含它. http://imagesloaded.desandro.com/

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

这篇关于`$ container.imagesLoaded不是函数`错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！