Бесконечная прокрутка перестает работать, как только я добавляю функцию ImagesLoaded в начальное состояние масонства

0

Я использую масонство для своего макета с плагином Infinite Scroll. Мне нужно было добавить плагин ImagesLoaded в масонство, но когда я это делаю, он, кажется, отключает функциональность бесконечной прокрутки. Когда я добавляю функцию ImagesLoaded в код масонства, бесконечный плагин прокрутки не работает. Он будет работать, если я возьму его с исходного кода масонства и оставлю его на обратном вызове, хотя..

Любые идеи, почему плагин InfiniteScroll не запускается? Заранее спасибо.

-

Перед этим javascript-кодом у меня есть.js файл с плагинами ImagesLoaded, Masonry и Infinite Scroll - в этом порядке.

   $(function(){

        var $container = $('#container'); 
            // When I add this ImagesLoaded function to the masonry block the infinite scroll plugin doesn't work
        $container.imagesLoaded(function(){
          $container.masonry({
            columnWidth: '.grid',
            gutterWidth:0, 
            isAnimated : true,
            resizeable: true,
            itemSelector : '.grid'
          });
        });
            // End conflicting code
        $container.infinitescroll({
          navSelector  : 'div.pagination', 
          nextSelector : 'div.pagination a.older',
          itemSelector : '.grid',
          loading: {
            finishedMsg: "End of the line!",

            msgText: "<em class='loading'>Loading...</em>"
         },
                animate      : true, 
                extraScrollPx:150, 
                extractLink: true,

            pathParse: function() {
                return ['{path=site/index}/P','']
            },
            debug: true,
            errorCallback: function() {  
            // fade out the error message after 2 seconds
            $('#infscr-loading').animate({opacity: .8},2000).fadeOut('normal');   
            }
            },
          // 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 );
            });
          }
        );
      });

Код, который я использую для плагина ImageLoaded:

// modified by yiannis chatzikonstantinou.

// original:
// mit license. paul irish. 2010.
// webkit fix from Oren Solomianik. thx!

$.fn.imagesLoaded = function( callback ){
  var elems = this.find( 'img' ),
      elems_src = [],
      self = this,
      len = elems.length;

  if ( !elems.length ) {
    callback.call( this );
    return this;
  }

  elems.one('load error', function() {
    if ( --len === 0 ) {
      // Rinse and repeat.
      len = elems.length;
      elems.one( 'load error', function() {
        if ( --len === 0 ) {
          callback.call( self );
        }
      }).each(function() {
        this.src = elems_src.shift();
      });
    }
  }).each(function() {
    elems_src.push( this.src );
    // webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f
    // data uri bypasses webkit log warning (thx doug jones)
    this.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
  });

  return this;
};
Теги:
infinite-scroll
jquery-masonry

1 ответ

0
Лучший ответ

Закончился поиск ответа на мой вопрос.

Вам необходимо инициализировать масонство перед функцией ImagesLoaded. Это создало некоторую странную сортировку при загрузке, поэтому я потерял элемент контейнера через определенное количество времени.

Код:

        var $container = $('#container').masonry(); 
        var $container = $('#container' ).css({ opacity: 0 });

        $container.imagesLoaded(function(){
          $container.delay(1000).animate({ opacity: 1 });
          $container.masonry({
            columnWidth: '.grid',
            gutterWidth:0, 
            isAnimated : true,
            resizeable: true,
            itemSelector : '.grid'
          });
        }); 

Ещё вопросы

Сообщество Overcoder
Наверх
Меню