Lazyload on masonry blog posts

[SCIP]

I am not sure if you will be able to provide an answer to this (perhaps it might be a future bug fix).

LazyLoad doesn’t seem to work on the Masonry blog. See http://hamilton.scipdev.org/news-events/

I have tried too different plugins, BL Lazyload and currently Rocketcache. The images are not all the same height.

I can disable lazyload, but I just wondered if you could like of any solution.

Many thanks

[Tom]

It looks like all of the necessary classes and data have been added to the images by the plugin.

When was the last time the plugin was updated?

[SCIP]

Thanks for the reply Tom

I have tried the latest version of BJ Lazyload (released a few days ago) and the latest version of wp-rocket and even loaded an old lazyload plugin. Nome of which worked.

I found some code is a site based upon a theme by Anders Noren who set a delay on the image loading. This seemed to help with a layout I produced with wp-toolset.

The code is


//Masonry blocks
$blocks = $(".posts");

$blocks.imagesLoaded(function(){
$blocks.masonry({
itemSelector: '.post-container'
});

// Fade blocks in after images are ready (prevents jumping and re-rendering)
$(".post-container").fadeIn();
});

$(document).ready( function() { setTimeout( function() { $blocks.masonry(); }, 500); });

$(window).resize(function () {
$blocks.masonry();
});

This might help.

I am more than happy to turn of lazyloading when I publish the site. I can then disable all the plugins on the demo site to see if it makes any difference.

This is such a great theme to work with.

Kind regards

Mark

[Tom]

Weird – those plugins should really work. GP uses core post thumbnail functions to display the post images, so if those plugins are built to work with any theme, I don’t see why they wouldn’t work with GP.

Your images do load, and they do seem to load as I scroll down, but they’re not fading in or anything nice.

Have you checked with the plugin developers?

[SCIP]

I think the problem might be something to do with lazyload loading an image of a certain size before the real image is loaded and this messes up the height of the blocks.

A solution, if anyone else has the problem, is just to disable lazyload on the blog page.

It only takes a few miliseconds longer to load the page because there wont be that many images, and the masonry block looks so good!

[Tom]

Interesting – thanks for posting the workaround in here, I’m sure someone will find it to be helpful.

Glad you’re enjoying the theme! 🙂

[Author]

Posts