Overlapping grid images with lazy loading

Question

Hi,

I've applied lazy loading to the images on a grid-container and the images keep overlapping in the grid.
I've used your demo-photographer.html as a starting point for the grid.
I also tried to specify the actual width and height of those images in the HTML but then they were stretched so I just specified the with.

Can you please help? Without lazy loading, the page load time is way too slow.

Here's the website: http://www.ajphotographer.ca/revamp/portfolio.html

Thank you!

SemiColonWeb · Accepted Answer

Hello,

Thanks for your Patience!

The Lazy Loading is not readily supported with Canvas. Consider using the following JS code in order to re-arrange the grid on successful loading of images:

jQuery('.grid-container').imagesLoaded().done( function() {
	jQuery('.grid-container').isotope('layout');
});

This should definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

ziggiesandvik · Answer

Hi. I've been waiting for 6 days for help. Can you please look into my request. Many thanks, Sebastian