43 lines
1.0 KiB
JavaScript
43 lines
1.0 KiB
JavaScript
|
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);
|
||
|
|
}
|
||
|
|
});
|