Cargo - Code Issue Tracker Masonry and dynamically loading in content

Issue Description

Hamish Brown website was causing issues on slower network speeds where masonry was firing before all the images had loaded – meaning by the time you reach the bottom of the page images hadn’t loaded in fully, but masonry had finished.

Enter imagesloaded – a plugin which sits alongside masonry

Issue Location

https://www.hamishbrown.com/

Code Snippets

setTimeout(function () {
    var $grid = jQuery('.masonry').masonry(masonryOptions);

    //Remove loading
    $grid.masonry('on', 'layoutComplete', function () {
    // console.log('removing loading');
    jQuery('.load-more').removeClass('loading');
    jQuery('.load-more--indicator').addClass('hidden');
  });
}, 200);

Fixed Code Snippets

setTimeout(function () {
    var $grid = jQuery('.masonry').imagesLoaded(function () {
        // init Masonry after all images have loaded
        $grid = jQuery('.masonry').masonry(masonryOptions);
    });

    //Remove loading
    $grid.masonry('on', 'layoutComplete', function () {
        // console.log('removing loading');
        jQuery('.load-more').removeClass('loading');
        jQuery('.load-more--indicator').addClass('hidden');
        // console.log('layout complete');
    });
}, 600);

References

Reference Description	Reference Link
Images loaded github	View Page

Masonry and dynamically loading in content

Issue Description

Issue Location

Code Snippets

Affected Browsers

Issue Type

Fixed Code Snippets

References