Bugs appending new elements (Infinite scroll + Masonry / Isotope)

[desandro]

Bugs appending new elements (Infinite scroll + Masonry / Isotope)

[negativefix]

Hello David,

I am using Isotope 1.5.11 with infinite-scroll on my tumblr blog. Yesterday I have came across a strange glitch when I tried to call imagesLoaded plugin inside infinite scroll callback. After images done loading, they were appended to the top of the page before moved to appropriate positions and animated. The behavior I expected was that the images to be appended to the bottom of the page and animated there.

Everything seemed working fine when I removed the imagesLoaded, but this time I had to deal with the overlapping images issue.

This is the code chunk I am using;

 $(function(){
             var $container = $('#index #posts');
             $container.imagesLoaded(function(){
                 $container.isotope({
                     itemSelector: '.post'
                 });
             });
             $container.infinitescroll({
                 navSelector: '#paging',
                 nextSelector: '#paging a.next',
                 itemSelector: '.post',
                 loading: {
                 'finishedMsg': 'No More Pages to Load',
                 'img': 'http://i.imgur.com/qkKy8.gif'
                 }
             },
             function(newElements){
                 console.log('Elements Retrieved:');
                 var $newElems = $(newElements);
                 $container.imagesLoaded(function(){
                         $container.isotope('appended', $newElems, function(){console.log('Appended');});
                 });
             });
         });

This is the url issue occuring: http://www.generesis.com/

[mattsaddo]

Im having this exact same issue with Isotope 1.5.11 aswell.

[Pixelous]

Im having this exact same issue too, any help please?

[kulbida]

Does anyone have a workaround?

[Pixelous]

Seems only one sollution http://masonry.desandro.com/demos/infinite-scroll.html another animation with opacity.

[kulbida]

Thanks

[desandro]

@kulbida @Pixelous If possible, can you an example URL we can take a look at?

[Pixelous]

David, here is the link with my problem http://layot.prestatrend.com/?page_id=82 As u can see after clicking 'Load more' button new elements are jumping to the top for a split second. Will be great to fix that if possible ofcourse. I use these lines of code by the way:

// call Isotope as a callback
            function ( newElements ) {
                var $newElems = jQuery( newElements );
                // ensure that images load before adding to masonry layout
                $newElems.imagesLoaded(function(){
                    $container.isotope( 'appended', jQuery( newElements ) );

But in case of using this code like that:

// call Isotope as a callback
            function ( newElements ) {
                var $newElems = jQuery( newElements );
                                $container.isotope( 'appended', jQuery( newElements ) );
                // ensure that images load before adding to masonry layout
                $newElems.imagesLoaded(function(){

There is no jumping anymore but seems imagesLoaded plugin doesn't work properly first time page loading or after cache clearing. Hope this info can help u to fix this issue. Thanks.

[desandro]

@Pixelous Here's what's happening...

1. Click Load More
2. New items are appended to layout. Items appear at top of layout becuase we're waiting for imagesLoaded to finish
3. Once imagesLoaded, Isotope layout is triggered and puts them in the proper place.

So one solution is to fade in the elements once they're ready

// call Isotope as a callback
function ( newElements ) {
  var $newElems = jQuery( newElements ).hide(); // hide to begin with
  // ensure that images load before adding to masonry layout
  $newElems.imagesLoaded(function(){
    $newElems.fadeIn(); // fade in when ready
    $container.isotope( 'appended', $newElems );
  });
}

Your issue is an implementation one, nothing wrong with imagesLoaded itself.

[Pixelous]

Wow, thanks u so much, David!

[kulbida]

thanks

[passy]

I ran into an issue using imagesloaded and masonry. It sometimes happens that imagesloaded reports an image to be loaded, while it actually hasn't yet.

In my case this was caused by the internal cache of imagesloaded, which is - as I understand it - purely based on the src attribute. If either the server is configured to make the images uncachable (e.g. if they're dynamically generated) or the client's cache overflows (happened to me in a long-running SPA), I append the still unloaded image element to the masonry grid and get ugly overlaps.

Would it be possible to add either a method to clear the cache or an option to disable it all together? I didn't notice any negative side-effects of disabling the cache for my particular use case.

[peterschuelke]

I'm experiencing similar issues to what passy is describing above. I'm using Masonry with passy's 'angular-masonry' directive. I set the images to be displayed on pagination. When paging forward, all is well. When paging backward, the images are not receiving height from masonry.

http://realdeal.co.il/

you can see my problem in the website above..
its wordpress + masonry + infinite scroll. when i press the load more button (blue arrows at the bottom of the page) the new items are loaded, then i use the infinite scroll callback with:
$('#post-area').masonry( 'appended' , $('.post, .recommand'));

so the items are appended, but all the items are one page height lower. the upper items are getting "top:1800px".. why is this happening?

[desandro]

@amit2602 You are adding all items that match '.post, .recommand', not just the newly appended items. Your callback should look like:

function( elems ) {
  var $elems = $( elems );
  $elems.imagesLoaded( function() {
    // only append new items
    $container.masonry( 'appended', $elems );
  });
}

This is a separate implementation issue.

thank you very much for the prompt replay, do you mean like this in my case?
function( elems ) {
var $elems = $('.post, .recommand');
$elems.imagesLoaded( function() {
// only append new items
$('#post-area').masonry( 'appended', $('.post, .recommand') );
});
}

it doesnt work.... any other idea?

[harpreetsb]

the problem i have is that images dont fadein. They just load/render from top to bottom.
I want to have a fadein effect for images.
sample code
$.get(baseurl+'common/loadFeeds/'+kw+'/'+fetched, '', function(data, status, xhr){
$('#holder').append(data)
var $container = $('#list .col1');
// initialize
$container.masonry();
$container.masonry( 'appended', data)
$container.imagesLoaded( function() {
$container.masonry({
itemSelector: '.item-conversation',
});
});
});

[GreenLondon]

Hi David,

I am using Masonry along with infinite scroll. Some how the images from the last page overlap. I have used some code snippets you posted above however this keeps going on

jQuery(document).ready(function(){
var container = jQuery('#mla_gallery-1');
var curPage = 0;
var pagesNum = jQuery("#page-nav").attr('class');
console.log(pagesNum);
container.imagesLoaded(function(){
container.masonry({
itemSelector: '.gallery-item',
columnWidth: 100,
transitionDuration: 0
});
});

container.infinitescroll({
  navSelector  : '#page-nav',    // selector for the paged navigation
  nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)
  itemSelector : '.gallery-item',     // selector for all items you'll retrieve

bufferPx : 10000,
extraScrollPx: 12000,
loadingImg : "http://b.imagehost.org/0548/Untitled-2.png",
loadingText : ""
},
// trigger Masonry as a callback
function( newElements ) {
curPage++;

        if(curPage == pagesNum) {

            jQuery(window).unbind('.infscr');

        } else {
    // hide new items while they are loading
    var newElems = jQuery( newElements ).hide();
    // ensure that images load before adding to masonry layout
    newElems.imagesLoaded(function(){
      // show elems now they're ready
      newElems.fadeIn();
      container.masonry( 'appended', newElems);
    });}
  }
);

});

here is an example: http://spotlight.studentlife.com.cy/wpcvp-preview/

Thank you very much for your time

[drianautz]

Hello, i use masonry + imagesloaded + infinitescroll, all work goods except the next page is always repeating, any solution ? thanks

[askaza]

Hi!
I use isotope 2.0 + imagesloaded + infinitescroll with prefill option.
I load first page with 6 items without infinitescroll, prefill start loading next page (also with 6 profiles).

Sometimes in chrome and ie there is a large top gap between items from first page and second page.
How to fix this problem?
After removing prefill option all works well.

[Caspert]

Hello, I am also using Masonry and Infinite Scroll, but when I scroll down, the new items don’t have a fadeIn animation. Also I have a in page scrollbar. How can I fix these things?

var $container = $('.entrybox');$container.masonry({
isResizeBound: true, /* Important!! /
isFitWidth: true, / Important!! */
transitionDuration: '0s',
itemSelector: '.blog-post'
});
$container.imagesLoaded( function() {
$container.masonry();
});

$container.infinitescroll({
  navSelector  : '.pagination',    // selector for the paged navigation
  nextSelector : '.next-page a',  // selector for the NEXT link (to page 2)
  itemSelector : '.blog-post',     // selector for all items you'll retrieve
   debug        : true,                        
   loadingImg   : "/img/loading.gif",          
   loadingText  : "Loading new posts...",      
   animate      : true,      


  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(){
      $newElems.fadeIn().delay(40); // fade in when ready
      $container.masonry( 'appended', $newElems, true );
    });
  }
);

[lkwrmwtr]

Hi, still can't seem to make it work on my end. The code that I'm using is:

$( function() {

var $container = $('.posts-padd');

$container.isotope({
    itemSelector : '.item-wrapper',
    layoutMode: 'masonry'
});

$container.infinitescroll({
    navSelector  : '.pagination-padd',
    nextSelector : '.pagination-padd a:last-child',
    itemSelector : '.item-wrapper',
    loading: {
        finishedMsg: 'No more pages to load.',
        img: 'http://i.imgur.com/qkKy8.gif'
    }
},
    function( newElements ) {
        var $newElems = $( newElements ).css({ opacity: 0 });
        $newElems.imagesLoaded(function(){
            $newElems.animate({ opacity: 1 });
            container.isotope( 'appended', $newElems, true ); 
        });
    }
);

});

[seta-donhh6551]

Hello, Please help.

I using istope for my website. When window scroll ajax load more items. But items is overlap. Where is incorrect in my code.
This is url for my website : http://vietpranks.com/

Sorry for my english. Thanks all very much

[seta-donhh6551]

Who can help me, Please :)

[harpreetsb]

If you are using ajax to call new results with infinite scroll, you would
require to reload the masonry or do a refresh on masonry. everytime you
fetch content.

On Wed, Mar 25, 2015 at 10:28 AM seta-donhh6551 [email protected]
wrote:

Who can help me, Please :)

—
Reply to this email directly or view it on GitHub
#14 (comment)
.

[seta-donhh6551]

in jquery when ajax loaded complete, we can using .On to run event live which not load js function again. we can using istope like this?

We can using like this?

$(obj).on.istope(function(){});

If it's not work, how will load istope?
I try with

success: function (result) // ajax loaded completed
{
var $demo = $('.page-main');
abc = $(result);
$demo.find('.grid-portfolio').imagesLoaded(function () {
$demo.find('.grid-portfolio').append( abc ).isotope( 'appended', abc );
});
}

But items is overlap. Plase for me a solution.

Thanks all, sr for my english

[JWiersema]

I have a problem with an implementation where I'm loading more content. When the content for the second page has been loaded and is appended the whole grid moves down to exactly after where the original content was. The following content (is part of) the code that is run each time a new page has been fetched. This cannot be done with a callback like in the inifinite scroll code.

  if (typeof g_Isotopegrid === 'undefined') {                        
                    g_Isotopegrid = $('.grid').isotope({
                        itemSelector: '.grid-item',
                        stamp: '.stamp',
                        masonry: {
                            columnWidth: 255,
                            gutter: 30
                        }
                    });                                                              
                }

              // Append all the hidden items to the visible items element
              hiddenElm.children().each(function () {

                // Append the items to the visible div
                $(this).appendTo(visibleElm);

                // only append new items
                g_Isotopegrid.isotope('appended', $(this));                                       
              });

                // re-layout after images are loaded
                $('.grid').imagesLoaded(function() {
                        g_Isotopegrid.isotope('layout');
                });

Does anyone have any suggestions as to why the re-layout is working but it moves the whole grid down till after where the content of the first load was?

[paulkaeth]

Guys, I have Infinite Scroll and Isotope working on WordPress almost perfectly.

I have six items loading initially, then the next 6 load in on scroll, this works perfectly until I click on one of the filter categories, then scroll down, the correct category items load in perfectly, but the other category items load up above the first item, then disappear. They kind of flash on and off.

Has anyone experienced this?

Any help/guidance would be greatly appreciated!

Thanks in advance.

[ma3ie4]

Hi,
this solution works for me (infinite scroll + isotope) :

// Used scripts:
// http://isotope.metafizzy.co/
// http://imagesloaded.desandro.com/
// https://github.com/infinite-scroll/infinite-scroll

if ($('.js-init-isotope').length > 0) {
    var $gridIsotope = $('.js-init-isotope').isotope({
        layoutMode: 'fitRows'
    });

    $gridIsotope.imagesLoaded().progress(function() {
        $gridIsotope.isotope('layout');
    });


    $('.js-infinite-scroll').infinitescroll({
        loading: {
            finished: undefined,
            finishedMsg: '<div class="alert">Finish loading</div>',
            img: '/images/reload.svg',
            msg: null,
            msgText: "",
            selector: '.items-list',
            speed: 'fast',
            start: undefined
        },
        state: {
            isDuringAjax: false,
            isInvalidPage: false,
            isDestroyed: false,
            isDone: false,
            isPaused: false,
            currPage: 1
        },
        behavior: undefined,
        binder: $(window),
        nextSelector: ".nav-previous > a",
        navSelector: ".pagination",
        contentSelector: '.items-list > .inner',
        extraScrollPx: 150,
        itemSelector: ".post",
        animate: false,
        pathParse: undefined,
        dataType: 'html',
        appendCallback: true,
        bufferPx: 40,
        errorCallback: function() {

        },
        infid: 0,
        pixelsFromNavToBottom: undefined,
        path: undefined,
        maxPage: undefined
    }, function(newElements) {
        // append new elements
        // http://isotope.metafizzy.co/methods.html
        $gridIsotope.isotope()
            .append(newElements)
            .isotope('appended', newElements);

        // trigger the isotope layout after all images are loaded
        // http://imagesloaded.desandro.com/#jquery
        $gridIsotope.imagesLoaded().always(function() {
            $gridIsotope.isotope('layout');
        });

    });
}

[juliusbangert]

Please could you advise me how to, (or show me an example code block of) using isotope with infinite scroll together on a wordpress custom-post-type archive page. It seems everything in this thread is for the older version of both scripts. So far I have my php WP_Query generating ten posts per page and am trying this js...

var $grid = $('.grid').isotope({
	itemSelector : '.grid-item',
	columnWidth : '.grid-sizer',
	percentPosition : true
});
		
var iso = $grid.data('isotope');
		
$grid.infiniteScroll({
	hideNav: '.pagination',
	path : '.pagination #next_archive_page',
	append : '.grid .grid-item',
	outlayer : iso,
	scrollThresold: 200
});

Using the infiniteScroll event callbacks and console log, I can see that request, load and append are being fired but I don't see anything happening in the page. Any suggestions?

[desandro]

@juliusbangert Your JS looks good. If you can provide a live link to your issue I may be able to take a look. Can you please open a new issue in the Infinite Scroll tracker?

---

I opened this issue back in 2012. All the libraries involved have had major updates. Please look at opening new issue in Infinite Scroll tracker.