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 |