Home » Jquery » javascript – Masonry, ImagesLoaded and LazyLoad gallery, remove animation-Exceptionshub

javascript – Masonry, ImagesLoaded and LazyLoad gallery, remove animation-Exceptionshub

Posted by: admin February 24, 2020 Leave a comment

Questions:

I’m trying to build a fully responsive image gallery using Masonry, ImagesLoaded & LazyLoad.

Now I’ve succeeded on this demo page.

It’s nearly working as intended. The only thing I do not like is that you see an animation effect of the images sliding into place on the initial page load. I have set transitionDuration: '0' to try and stop this, but it still has that animation.

Each image has a specified height to it. So all images that load after scrolling do not have any moving around, which is good.

I can stop the initial animation by removing this from the css:

.grid-item img {
    height:auto;
}

But this then causes thumbnails to look out of proportion when resizing the browser.

So I’m looking for a way where I can still resize the browser, an images keep the correct dimentions, but also show the images without the loading animation on initial page load.

How to&Answer: