first

wp-content/plugins/visual-portfolio/assets/js/3rd/plugin-jetpack.js

@@ -0,0 +1,42 @@
+import $ from 'jquery';
+import { debounce } from 'throttle-debounce';
+
+let jetpackLazyImagesLoadEvent;
+try {
+	jetpackLazyImagesLoadEvent = new Event('jetpack-lazy-images-load', {
+		bubbles: true,
+		cancelable: true,
+	});
+} catch (e) {
+	jetpackLazyImagesLoadEvent = document.createEvent('Event');
+	jetpackLazyImagesLoadEvent.initEvent(
+		'jetpack-lazy-images-load',
+		true,
+		true
+	);
+}
+
+// Fix AJAX loaded images.
+$(document).on('loadedNewItems.vpf', function (event) {
+	if (event.namespace !== 'vpf') {
+		return;
+	}
+
+	$('body').get(0).dispatchEvent(jetpackLazyImagesLoadEvent);
+});
+
+// Fix masonry reloading when Jetpack images lazy loaded.
+// https://github.com/Automattic/jetpack/issues/9595
+//
+// p.s. it looks like this fix is not working at all in Safari browser.
+const runReLayout = debounce(200, ($gallery) => {
+	$gallery.vpf('imagesLoaded');
+});
+
+$(document.body).on('jetpack-lazy-loaded-image', '.vp-portfolio', function () {
+	const $this = $(this).closest('.vp-portfolio');
+
+	if ($this && $this.length) {
+		runReLayout($this);
+	}
+});