Собственная проблема Chrome lazyload со скрытыми изображениями - PullRequest
Новая
       4

Собственная проблема Chrome lazyload со скрытыми изображениями

0 голосов
/ 27 февраля 2020

Я пытаюсь использовать собственную lazyload (https://css-tricks.com/native-lazy-loading/) на странице с каруселью изображений (пятно. js).

Во избежание отображения всех изображений до Карусель загружается, я использую, чтобы показать первое изображение, и после инициализации карусели я позволяю им отображаться на основе правил карусели.

Использование атрибута loading = "lazy" приводит к тому, что контейнер карусели отображает больше, чем он должен быть внутренние изображения (которые были спрятаны до инициализации) изменяются неправильно. Когда изображение становится видимым, браузер корректно изменяет его размер и размер контейнера корректируется.

С помощью следующего кода я ожидаю, что контейнер для карусели будет иметь размер 250x150, но это 250x250, пока я не увижу все изображения внутри. Используя инспектор, я вижу, что размер изображения составляет 250 x 250 пикселей (intrinsi c: 500 x 300 пикселей) . 

<section class="carousel">
    <img class="first" loading="lazy" src="image500x300.jpg" />
    <img loading="lazy" src="image500x300.jpg" />
    <img loading="lazy" src="image500x300.jpg" />
</section>

<style>
    .carousel { width: 50%; }
    .carousel img { width: 100%; height: auto; }
    .carousel > img { display: none; }
    .carousel > img.first { display: block; }
</style>

<script>
    $('.carousel').slick();
</script>

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

Кажется, что если изображения загружаются из кэша, он работает правильно, но я не совсем уверен в этом.

Я скопировал его в jsfiddle : https://jsfiddle.net/9ygvuzj4/5/

Есть ли обходной путь, чтобы избежать этой проблемы?

Спасибо

...