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

所以，我得到$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://sofzh.miximages.com/jquery/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文件：

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

谢谢。

编辑1

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

     (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://sofzh.miximages.com/jquery/6RMhx.gif' } }, function( newElements ) { var $newElems = $( newElements ).css({ opacity: 0 }); $newElems.imagesLoaded(function(){ $newElems.animate({ opacity: 1 }); $container.masonry( 'appended', $newElems, true ); }); } ); })(jQuery);  

Answer 1

imagesLoaded在版本3.0.0中与Masonry分开捆绑。 你必须单独包括它。 http://imagesloaded.desandro.com/

Answer 2

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

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

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