Слайдер с размерами зависящими от загрузки dom и картинок

Вопросы по вёрстке и JavaScript
Ответить
louisvuitton
Сообщения: 196
Зарегистрирован: 2014.02.16, 03:09

Слайдер с размерами зависящими от загрузки dom и картинок

Сообщение louisvuitton » 2019.08.14, 04:24

Здравствуйте,
Есть недоделанная верстка с хитро вкрученным в страницу слайдером.
Используется jquery и слайдер slick.js

Слайдер инициализируется на $(document).ready но проблема в том, что похоже его размеры подсчитываются как-то от размеров загруженных картинок, и он нормально отображается только после ввода url страницы в адресную строку и нажатия enter. Если нажать ф5 или кнопку "обновить" в интерфейсе браузера, слайдер не отображается. Думаю, потому что картинки не успевают прогрузиться до инициализации.

Попробовал повесить инициализацию на on('load') всех картинок. В таком случае получается наоборот. При обновлении страницы картинки перекачиваются и событие инициализирует слайдер. Но если нажать enter после ввода url, то похоже картинки берутся из кеша и событие не вызывается...

Как быть? :?

зы: такое поведение только в фф, в вебкитах все норм

Аватара пользователя
Chelobaka
Сообщения: 161
Зарегистрирован: 2018.06.01, 09:54

Re: Слайдер с размерами зависящими от загрузки dom и картинок

Сообщение Chelobaka » 2019.09.18, 13:43

Вставить изначально изображение 1x1 пиксель и укажите его размер, такие как вам нужны. В px если известна ширина и высота будущих загружаемых картинок или блока содержащего слайдер. Или % если не знаете размер картинок или дизайн адаптивный, но тут нужно указывать min-width, nin-height;

Еще вариант указать минимальные значение самого блока содержащий слайдер.

Ответить