Прелоадер для адаптивных изображений?

Question

[sergey1989]

Доброго времени суток. Посоветуйте, пожалуйста, прелоадер для адаптивных изображений. Не могу понять как задать блоку прелоадера размеры картинки которая будет отображаться после подгрузи? Для фиксированного размере проблем нет, но на сайте картинки адаптивные.

Answer 1

[Денис Инешин]

Просто центрируйте внутри блока, например фоном:

.image_container {
    background: url(preloader.gif) no-repeat 50% 50%;
}

Comments

[sergey1989]

Там скрипт идет что url прелоадера заменяется url основной картинки. А как тогда высоту блока задать для адаптива?

[Денис Инешин]

sergey1989: не нужно заменять урл прелоадера на урл картинки. Гифка фоном лучшее решение. Тем более браузеры сегодня достаточно умные чтобы не тратить ресурсы на обработку гифки, которую уже не видно. Высота блока обычно меняется скачками при увеличении размера устройства.

[sergey1989]

Денис Инешин: А вообще какими готовыми JS решениями для прелоадера посоветуете пользоваться?

[Денис Инешин]

sergey1989: никакими, создаете контейнер. Кладете на фон гифку с preloaders.net/. Вставляете изображение поверх. 100% эффект предзагрузки.

[sergey1989]

Денис Инешин: Те никакого JS?

[sergey1989]

Денис Инешин: Написал в комменте ниже.

Answer 2

[sergey1989]

Задать min-height блока изображения для каждого устройства? иначе прелоадер появляется на одной линии начала текста.