我在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;
}


现在,出现了一个谜:加载页面时,产品图片似乎消失了!最小化窗口时,图片看起来完美。接下来,我再次最大化页面,图片现在可以正确显示。但是,我刷新页面,图片再次消失了:(。

这是我花了数小时才能解决的问题之一,所以我需要您的聪明才智来帮助我!

非常感谢男孩和女孩。
你是最好的。

最佳答案

我怀疑正在应用某种动画,从而延迟了窗口的渲染。您的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);

关于javascript - 仅在调整窗口大小后才能添加类的Javascript吗?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/42318504/

10-12 07:27
查看更多