클래스를 추가하는 Javascript는 창 크기를 조정 한 후에 만 ​​작동합니까?

Question

나는 내 Squarespace 웹 사이트 (https://hethuisvandelingerie.squarespace.com/lingerie/LI001)에 이상한 점을 가지고 있으며, 나를 괴롭 히고있다. ...

이것은 내 목표 : http://imgur.com/a/Y5mxN입니다. 스크롤바가없는 전체 화면 제품 사진이있는 제품 페이지를 만들고 싶습니다. 추가 된 CSS 클래스

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',''); 
    } 
} 

, 나는 다음과 같은 적은 코드 찾기 :

이것을 달성하기 위해

, 일부 자바 스크립트는 하나의 제품 사진 페이지에있는 경우 주입

@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가 제안한 시간 제한을 추가하여 해결되지 않았습니다. @ Las Masister, 도와 주셔서 감사합니다!

CSS 클래스 .flow-items-fill이 삽입 되었기 때문에 문제가 발생했습니다. 이 CSS 클래스에서는 #flow-items (또는 이미지) 높이를 100 %로 설정하도록 요청했습니다. 그러나 부모 개체의 높이 (height: 0px)가 없습니다 ... 100 % 0px 0 -> 내 그림이 사라집니다. 부모 개체의 높이 (#main)를 지정하면 그림 높이가 더 이상 0px로 설정되지 않습니다.

이제 원하는 결과를 얻었습니다.

Kr을, BarrieO는

Answer 2

최소 창 크기는

시간이 지연되어 500msec가 지나면 상황이 바뀌는 지 확인하십시오 :

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);