imagesLoaded方法不使用JQuery砌体和无限滚动 [英] imagesLoaded method not working with JQuery masonry and infinite scroll

问题描述

我一直在使用JQuery砌体，现在我正在添加无限滚动。几乎每个砌砖砖中都有图像，在我使用无限卷轴之前，图像加载得很好，一切都很棒。我为无限滚动添加了javascript的下一部分，并在里面添加了imagesLoaded方法，但是当添加新砖块时，它们全部堆积在顶部。我的假设是我没有在无限滚动回调中正确添加imagesLoaded方法，但我无法找到我的错误。这是代码

I've been using JQuery masonry and now I'm adding infinite scroll. There are images in nearly every masonry "brick" and before I was using infinite scroll the images loaded fine and everything was great. I added the next part of the javascript for the infinite scroll and added the imagesLoaded method inside but when the new bricks are appended they come out all piled on top. My assumption is that I am not adding the imagesLoaded method properly in the infinite scroll callback but I haven't been able to find my error. Here's the code

<script type="text/javascript">
    $(function(){
        var $container = $('#container');
        $container.imagesLoaded(function(){
          $container.masonry({
            itemSelector : '.tile',
            columnWidth : 240
          });
        });


    var $container = $('#container');
    $container.infinitescroll({
        navSelector  : ".flickr_pagination",            
                       // selector for the paged navigation (it will be hidden)
        nextSelector : "a.next_page",    
                       // selector for the NEXT link (to page 2)
        itemSelector : "div.tile"          
                       // selector for all items you'll retrieve
      },
      // trigger Masonry as a callback
      function( newElements ) {
        var $newElems = $( newElements );

        $container.imagesLoaded(function() {
            masonry( 'appended', $newElems );
        });
      }
    );
    });
</script>

第一个JQuery砌体调用工作正常，尚未触及。这是似乎存在问题的第二部分。感谢您的帮助，如果您需要更多信息，请告诉我。

The first JQuery masonry call works fine and hasn't been touched. It's the second part where there seems to be a problem. Thanks for the help and let me know if you need more information.

推荐答案

以下是答案

$(function(){

        var $container = $('#container');
        $container.imagesLoaded(function(){
          $container.masonry({
            itemSelector : '.tile',
            columnWidth : 240
          });
        });

    $container.infinitescroll({
          navSelector  : '.flickr_pagination',    // selector for the paged navigation 
          nextSelector : 'a.next_page',  // selector for the NEXT link (to page 2)
          itemSelector : '.tile',     // selector for all items you'll retrieve
          loading: {
              finishedMsg: 'No more pages to load.',
              img: 'http://i.imgur.com/6RMhx.gif'
            }
          },
          // trigger Masonry as a callback
          function( newElements ) {
            // hide new items while they are loading
            var $newElems = $( newElements ).css({ opacity: 0 });
            // ensure that images load before adding to masonry layout
            $newElems.imagesLoaded(function(){
              // show elems now they're ready
              $newElems.animate({ opacity: 1 });
              $container.masonry( 'appended', $newElems, true ); 
            });
          }
        );
    });

问题是我在无限滚动回调函数中调用$ container上的.imagesLoaded（）和我应该在$ newElements上调用它。

The problem was I was calling .imagesLoaded() on $container in the infinite scroll callback function and I should have been calling it on $newElements.

这篇关于imagesLoaded方法不使用JQuery砌体和无限滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！