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类，我找到以下LESS代码：

@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;
}

现在，神秘感出现了：加载页面时，产品图片似乎消失了！最小化窗口时，图像看起来很完美。接下来，我再次最大化页面＆amp;图片现在正确显示。但是，我刷新了我的页面，图片再次消失:(。

这是我花了几个小时的事情之一。需要几个小时才能解决，所以我需要你聪明的大脑来帮助我！

非常感谢大家和他们女孩。你是最好的。

Answer 1

我怀疑是否存在某种类型的动画会延迟窗口的渲染。您的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);

Answer 2

万一你有兴趣。我能够解决这个问题。它与渲染序列无关，并且没有通过添加Rasmeister建议的超时来解决。 @Rasmeister，感谢您的帮助！

问题是由于注入了CSS类.flow-items-fill引起的。在这个CSS课程中，我要求#flow-items（或图像）高度为100％。但是，我的父对象没有高度（height: 0px）... 100％的0px等于0 - ＆gt;我的照片消失了。为父对象（#main）指定高度时，图片高度不再设置为0px。

现在，我有了理想的结果！

氪， BarrieO

添加类的Javascript仅在调整窗口大小后才有效？

2 个答案: