我在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/