Попытка запустить тест, в котором я использую чистый JS, чтобы включить масштабирование изображения и панорамирование на лениво загруженных изображениях в элементе html5 изображения.
HTML:
<picture style="opacity: 1;"><source data-srcset="https://media.artifactuprising.com/media/catalog/product/l/a/layflat-main01-pink-photo-book-couples_2x_2.jpg?width=1300&auto=webp" media="(min-width: 768px)" srcset="https://media.artifactuprising.com/media/catalog/product/l/a/layflat-main01-pink-photo-book-couples_2x_2.jpg?width=1300&auto=webp"><source data-srcset="https://media.artifactuprising.com/media/catalog/product/l/a/layflat-main01-pink-photo-book-couples_2x_2.jpg?width=1060&auto=webp" media="(min-width: 576px)" srcset="https://media.artifactuprising.com/media/catalog/product/l/a/layflat-main01-pink-photo-book-couples_2x_2.jpg?width=1060&auto=webp"><source data-srcset="https://media.artifactuprising.com/media/catalog/product/l/a/layflat-main01-pink-photo-book-couples_2x_2.jpg?width=1456&auto=webp" media="(min-width: 376px)" srcset="https://media.artifactuprising.com/media/catalog/product/l/a/layflat-main01-pink-photo-book-couples_2x_2.jpg?width=1456&auto=webp"><source data-srcset="https://media.artifactuprising.com/media/catalog/product/l/a/layflat-main01-pink-photo-book-couples_2x_2.jpg?width=668&auto=webp" media="(min-width: 0px)" srcset="https://media.artifactuprising.com/media/catalog/product/l/a/layflat-main01-pink-photo-book-couples_2x_2.jpg?width=668&auto=webp"><img class="lazy PhotoSlider___StyledCatalogImage-sc-1rj4nek-2 httVLY loaded" src="https://media.artifactuprising.com/media/catalog/product/l/a/layflat-main01-pink-photo-book-couples_2x_2.jpg?width=10&auto=webp" data-was-processed="true"></picture>
JS:
Однако проблема в том, что он будет работать с первым или вторым изображением, но никогда 3-е + изображение в карусели. Я думаю, что это какое-то состояние гонки, но я попробовал тайм-аут, и это тоже не сработало. Я застрял.