Основание и эквалайзер не очень хорошие

98
10

Новое с основанием. Я использую основу 5 вместе с эквалайзером - у меня просто есть строка с двумя столбцами, у одного есть текст, а у другого есть изображение. Мне нужно, чтобы оба столбца были одинаковой высоты, поэтому я использую эквалайзер данных.

      <div class="row collapse" data-equalizer >
<div class=" large-6 columns main-headline story panel" data-equalizer-watch>
<div class="large-3 columns panel end" data-equalizer-watch>
<img src="http://lorempixel.com/output/people-q-c-640-480-2.jpg" class="main-headline-image ">
</div>

Теперь проблема заключается в том, что, поскольку изображение занимает некоторое время для загрузки, возникает раздражающее отставание: первый div сначала отображается коротким, а затем через пару секунд его высота пересчитывается эквалайзером (поскольку изображение загружено и теперь эквалайзер дает ему высоту изображения div), и он растягивается, чтобы соответствовать высоте изображения (хорошо, что он растягивает то, что должно произойти, но это не нормально, что для этого требуется 2-3 секунды. 'хорошо выглядеть вообще).

Есть ли стратегия борьбы с этим? Это проблема, так как я развиваюсь на местном уровне, и это уже достаточно плохо, я не хочу думать, как он выглядит в производстве со многими другими изображениями. Я думаю, что предварительная настройка высоты на столбцах исправит ее, но разве это не "плохой" способ работать с фундаментом? Дает ли колоннам предопределенную высоту, разрушающую отзывчивость всего этого?

спросил(а) 2014-09-24T13:30:00+04:00 5 лет, 5 месяцев назад
1
Решение
69

Если ваш образ слишком толстый, вы по-прежнему будете страдать от эффекта "изменить размер после 2-3 секунд", основы или нет.
Дать фиксированную высоту столбцу - плохая идея из-за потери отзывчивости.

Альтернативами являются:

оптимизировать изображение показать, что блок с выравниванием оснований только после загрузки изображений

ответил(а) 2014-09-26T18:02:00+04:00 5 лет, 5 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема