jQuery super slow masonry layout 🤯

Gummibeer

Astroneer
Moderator
Local time
11:47
Joined
Oct 5, 2019
Messages
1,169
Pronouns
he/him

Hey all,

I'm lost - I've no idea what's wrong but the Masonry https://isotope.metafizzy.co/ layouts super slow on this page


JavaScript:
var $isogrid = $('.grid .isotope');
$isogrid.isotope({
    itemSelector: '.item',
    percentPosition: false,
    transitionDuration: '0.7s',
    masonry: {
        columnWidth: $isogrid.width() / 12,
    },
    layoutMode: 'masonry'
});
$isogrid.isotope('layout');
$(window).resize(function () {
    $isogrid.isotope('layout');
});
$isogrid.imagesLoaded().progress(function () {
    $isogrid.isotope('layout');
}).always(function () {
    $isogrid.isotope('layout');
});
if($isogrid.parents('.accordion-wrapper').length) {
    $isogrid.parents('.accordion-wrapper').first().on(
        'shown.bs.collapse',
        function () {
            $isogrid.isotope('layout');
            $([document.documentElement, document.body]).animate({
                scrollTop: $isogrid.parents('.collapse.show').first().parents('.accordion-tab').offset().top
            }, 1000);
        }
    );
}

The HTML <img/> tags are prepared by width and height attributes. Is my strategy to layout multiple times bad? Is there any more modern/faster masonry library?

 
Top