Question

我正在使用Masonry进行无限滚动插件的布局。我需要将ImagesLoaded插件添加到Masonry，但是当我这样做时，它似乎禁用了无限滚动功能。当我将ImagesLoaded函数添加到Masonry代码时，无限滚动插件不起作用。如果我把它从最初的Masonry代码中删除并将其保留在回调中，它将会起作用。

任何有关InfiniteScroll插件无法启动的想法？提前谢谢。

-

在此javascript代码之前，我有一个带有ImagesLoaded，Masonry和Infinite Scroll插件的.js文件 - 按此顺序。

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

Answer 1

结束了我自己的问题的答案。

您需要在ImagesLoaded函数之前初始化Masonry。这在负载上创建了一些奇怪的排序，所以我在指定的时间后淡化了容器元素。

代码：

        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'
          });
        });

一旦我将ImagesLoaded函数添加到初始Masonry状态，无限滚动就会停止工作

1 个答案: