Slow performance with lots of items with infinite scroll

[MennaEllithey]

hi, @desandro

in my page i used masonry and infnite scroll, and the masonry blocks contains buttons that expand/minimize the block, so when it loads a large amount of blocks and i click on those buttons it takes so much time to execute the event and relayout masonry.

is there any way to relayout blocks in sequance way or something?

Note:

layoutItems Method doesn't work for me. $container.masonry( 'layoutItems', items, isStill ) here was my code:

        var blockItems = $('#main_body').masonry('getItemElements');
        $("#main_body").masonry('layoutItems', blockItems , true);

*Uncaught TypeError: Object # has no method 'on'

and i tried this also:

       var arr = new Array();
       $(".main_items").each(function () {
            var blockItems = $('#main_body').masonry('getItem', $(this));
            arr.push(blockItems);
       });
      $("#main_body").masonry('layoutItems', arr , true);

*Uncaught TypeError: Object [object Object] has no method 'getSize'

thanks a lot..

[desandro]

I'm sorry to see you're having trouble with Masonry. Could you provide a live example? See Submitting Issues in the contributing guidelines.

Most likely, you just want to use the .masonry() / layout method. layoutItems is useful when you only want to layout certain items, not all of them. But .masonry() / layout is the easiest and works more reliably for your use case.

[MennaEllithey]

i already use .masonry() method to re layout the items but when i have a large amount of items it takes a lot of time to re layout all items after execute the minimize event so i guess if i could re layout the items row by row it could help me..

when i click this arrow it supposed to minimize the block and re layout all blocks (( when the page contains less than 40 item there is no problem, but else that is what happen for 2 seconds or more depending on the number of items ))

[desandro]

Thank you for clarifying. So you're running into a performance problem. You may want to consider trying Infinity.js which was designed to handle lots and lots of elements and be extra speedy. See demo.

Other round-about solutions:

• Disable the transition transitionDuration: 0.
• Break up loaded pages into separate masonry instances

I'll keep this issue open for additional discussion. I've updated title of this issue to "Slow performance with lots of items with infinite scroll"

[marceloxlo]

I've the same problem. my website takes much time to load all the grid.... the url is Sabeonde. any help?

[kaansoral]

I've recently implemented a routine to hide invisible elements of the page, in hopes that it will improve the rendering performance with masonry

I use masonry + native scrolling at web and masonry + iScroll at mobile

Mainly Firefox had issues with masonry collections at 200+ elements (my CPU's are at 20-30%) - While Chrome didn't have any issues, I start removing elements at ~1000's and re-layout, it works like a charm at Chrome, boggled Firefox

After implementing the hider routine (sets the height of the contained entities at a parent div, hides the element, so there is no need for a layout) things improved a lot on Firefox (seemingly)

I have no way to test performance at Firefox, but excessive rendering times disappeared, add routines dropped from 4+ seconds to <1 seconds (again, couldn't test things scientifically)

After seeing this thread, I thought I would share my experience

@desandro - you probably have much much more knowledge of the browser rendering architectures, do you think hiding elements like this would actually improve the performance? (I'm currently using display:none, the elements have a large main photo, some small photos, text and stuff, not too excessive)

[desandro]

@kaansoral I believe hiding elements is exactly what makes Infinity.js so fast

[desandro]

Infinite Scroll v3 has been released with a brand new rewrite including tight Masonry support. Please try upgrading to the Infinite Scroll v3.

Please open a new issue if you continue to run into this issue.