Jetpack images lazy loading conflict with imagesloaded and masonry

Although we have added JS compatibility with support for the Jetpack plugin, sometimes it still does not work correctly and conflicts with our scripts.

Wrong position of Masonry items

The Jetpack has a custom JS event named jetpack-lazy-loaded-image, which we use to trigger Masonry re-layout after images lazy loaded. But for some reason, it is not fired in the Safari browser. Most likely, the problem is in the lazy load script of the jetpack (https://github.com/Automattic/jetpack/blob/13cce2d9b112b121645020c49e43a85dc593dd71/projects/packages/lazy-images/src/js/lazy-images.js#L183-L188)

The solution is simple – disable Jetpack’s lazy loading and use Visual Portfolio’s lazy loading.

Related topic – https://wordpress.org/support/topic/portfolio-not-displaying-correctly-on-safari/

Was this page helpful?