Метод imagesLoaded не работает с кладкой JQuery и бесконечной прокруткой - PullRequest
Новая
       15

Метод imagesLoaded не работает с кладкой JQuery и бесконечной прокруткой

8 голосов
/ 19 марта 2012

Я использовал кладку JQuery и теперь добавляю бесконечный свиток.Почти в каждом кирпичном кирпиче есть изображения, и до того, как я использовал бесконечную прокрутку, изображения загружались нормально, и все было замечательно.Я добавил следующую часть javascript для бесконечной прокрутки и добавил метод imagesLoaded внутри, но когда добавляются новые кирпичи, они выходят полностью сложенными сверху.Я предполагаю, что я не добавляю метод imagesLoaded надлежащим образом в обратный вызов бесконечной прокрутки, но я не смог найти свою ошибку.Вот код 

<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 работает нормально и не был затронут.Это вторая часть, где, кажется, есть проблема.Спасибо за помощь и дайте мне знать, если вам нужна дополнительная информация.

1 Ответ

12 голосов
/ 24 марта 2012

Вот ответ 

$(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 ); 
            });
          }
        );
    });

Проблема заключалась в том, что я вызывал .imagesLoaded () для контейнера $ в функции обратного вызова бесконечной прокрутки, и я должен был вызывать его для $ newElements.

...