Javascript для добавления класса работает только после изменения размера окна?

Question

У меня есть что-то странное на моем сайте Squarespace (https://hethuisvandelingerie.squarespace.com/lingerie/LI001), и это сводит меня помешанные ...

Это моя цель: http://imgur.com/a/Y5mxN. Я хотел бы, чтобы страница продукта имела полноэкранное изображение продукта без полосы прокрутки.

Для того, чтобы достичь этого, некоторые JavaScript вводится, если только одна картина продукт присутствует на странице:

if (Y.one('.collection-type-products') 
&& Y.one('.product-item-single-image-fill'))) 
&& Y.all('.flow-item').size() === 1) { 
    if (Y.config.win.innerWidth > 640) { 
     Y.one('body').addClass('flow-items-fill'); 
     Y.one('.flow-item').addClass('content-fill'); 
    } else { 
     Y.one('body').removeClass('flow-items-fill'); 
     Y.one('.flow-item').removeClass('content-fill'); 
     Y.one('.flow-item img').setAttribute('style',''); 
    } 
} 

Для классов CSS, которые добавляются, я нахожу следующий МЕНЬШЕ код:

@media screen and (min-width: 641px){ 
    .flow-items-fill{ 
     height:100%; 
     #canvas{ 
      height:100%; 
     } 
     #main{ 
      height:100%; 
      >.wrapper{ 
       height:100%; 
      } 
     } 
     #flowItems{ 
      height:100%; 
     } 
     .flow-item{ 
      height:100%; 
     } 
    } 
    .flow-item{ 
     .content-fill{ 
      height: 100%; 
     } 
    } 

А также:

// Responsive Images 
img{ 
    // max-width:100%; 
} 
// But not for imageLoader stuff 
.content-fill > img, 
.content-fit > img{ 
    max-width:none; 
} 

Теперь появляется тайна: при загрузке страницы, то изображение продукта кажется исчезающим! При минимизации окна изображение выглядит идеально. Затем, я снова увеличиваю страницу &, изображение теперь отображается правильно. Тем не менее, я обновить мою страницу и картина ушла еще раз :(.

Это один из тех вопросов, я проводил часы & часов, чтобы решить, так что мне нужно ваши умные мозги, чтобы помочь мне!

Большое спасибо ребята & девушки. ты лучший.

Answer 1

На всякий случай вы заинтересованы. Я смог решить проблему. Он не был связан с последовательностью рендеринга и не был разрешен путем добавления тайм-аута, предложенного Расмайстером. @Rasmeister, я ценю вашу помощь!

Проблема была вызвана тем, что был введен код CSS .flow-items-fill. В этом классе CSS я попросил получить высоту #flow-items (или изображение) 100%. Однако мой родительский объект не имел высоты (height: 0px) ... 100% от 0px равно 0 -> мое изображение исчезает. При указании высоты моего родительского объекта (#main) высота изображения больше не установлена ​​на 0px.

Теперь у меня есть желаемый результат!

Kr, BarrieO

Answer 2

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

Попробуйте задержка на паузу 500 мсек, чтобы определить, если это изменит ситуацию:

setTimeout(function() { 
    if (Y.one('.collection-type-products') 
    && Y.one('.product-item-single-image-fill'))) 
    && Y.all('.flow-item').size() === 1) { 
     if (Y.config.win.innerWidth > 640) { 
      Y.one('body').addClass('flow-items-fill'); 
      Y.one('.flow-item').addClass('content-fill'); 
     } else { 
      Y.one('body').removeClass('flow-items-fill'); 
      Y.one('.flow-item').removeClass('content-fill'); 
      Y.one('.flow-item img').setAttribute('style',''); 
     } 
    } 
}, 500);