Как использовать библиотеку среднего масштаба вместе с lazysizes?

Question

lazysizes позволяет улучшить UX с преобразованиями при загрузке изображений, а medium-zoom разблокирует масштабирование изображений, например, Medium. Проблема в том, что lazysizes выполняет преобразования асинхронно. Таким образом, если вы зарегистрируете изображения для масштабирования где-то в нижнем колонтитуле страницы, запустив что-то вроде

mediumZoom( "[data-zoomable]" )

, это, скорее всего, будет выполнено до выполнения преобразований. И масштабирование не будет работать, потому что оно будет привязано к отдельным узлам. Итак, как мы можем использовать библиотеки вместе?

Answer 1

lazysizes предоставляет API событий (https://github.com/aFarkas/lazysizes#js -api --- events ). Таким образом, мы можем зарегистрировать узлы изображения для масштабирования, когда это уже безопасно:

document.addEventListener( "lazybeforeunveil", e => {
   mediumZoom( "[data-zoomable]" );
});