Skip to content

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

Open
desandro opened this Issue Jan 11, 2012 · 28 comments
@desandro
Owner

Several users have had problems with past versions of imagesLoaded (pre v1.1.0) and Infinite Scroll with Masonry or Isotope. If you're having trouble as well with these, please speak up.

This issue tracker will collect the previous issues held in Masonry and 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
kulbida commented Jul 23, 2012

Does anyone have a workaround?

@Pixelous

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

@kulbida
kulbida commented Jul 23, 2012

Thanks

@desandro
Owner

@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
Owner

@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
kulbida commented Jul 24, 2012

thanks

@ghost Unknown referenced this issue in metafizzy/isotope Oct 13, 2012
Closed

Hide elements in the first load #282

@passy
passy commented Jul 29, 2013

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.

@amit2602

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
Owner

@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.

@amit2602

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

@novoopusIW

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
askaza commented Aug 8, 2014

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
Caspert commented Oct 11, 2014

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
lkwrmwtr commented Feb 7, 2015

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
@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?

@Paul-Allen

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?

I've set up a demo here http://test.wpdev.click/

Click on the Logos filter, then scroll down and you will see items flash above the top left item.

Any help/guidance would be greatly appreciated!

Thanks in advance.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.