Lazysizes srcset图像在加载图像之前让浏览器确定总页面大小

Question

我在流体布局中使用lazyzes插件和srcset。我不知道如何让浏览器将页面加载到正确的长度，而不是在滚动时扩展页面。

我使用引导程序框架制作了一个代码笔，在这里演示

http://codepen.io/elevenelevne/pen/EKbERV

经过大量阅读，我确信这与浏览器无法计算高度有关，因为它没有设置，但我无法让它以响应的方式工作

代码，但有10行

<div class="container-fluid">
  <div class="row-fluid">
    <div class="col-xs-12 col-sm-6">
      <img data-sizes="auto" data-src="http://placehold.it/160x107" data-srcset="http://placehold.it/320x231 640w, http://placehold.it/640x426 1280w, http://placehold.it/1000x666 2000w, http://placehold.it/2500x1666 4000w" class="img-responsive lazyload" />
    </div>
    <div class="col-xs-12 col-sm-6">
      <img data-sizes="auto" data-src="http://placehold.it/160x107" data-srcset="http://placehold.it/320x231 640w, http://placehold.it/640x426 1280w, http://placehold.it/1000x666 2000w, http://placehold.it/2500x1666 4000w" class="img-responsive lazyload" />
    </div>
  </div>
  </div>
</div>

如有任何帮助，我们将不胜感激。

Answer 1

对于任何感兴趣的人，我通过在img周围添加包装并将填充底部设置为与图像匹配的比例来解决页面回流的问题。在我的情况下，它是一个9x6的图像，所以我做了以下等式

6/9=0.6666667*100=66.666667

经过一番尝试和错误，我最终得到了66.5%的全宽图像和33.25%的50%宽图像，因为在某些尺寸下，浏览器认为图像太高了1倍

http://codepen.io/elevenelevne/pen/jqYqJa

  <div class="lazy-wrapper ratio-padding">
    <img data-src="http://placehold.it/160x107" data-srcset="http://placehold.it/320x231 320w, http://placehold.it/640x426 640w, http://placehold.it/1000x666 1000w, http://placehold.it/2500x1666 2500w" sizes="100vw" class="lazyload" alt="" />
  </div>
  <div class="lazy-wrapper-2 ratio-padding-half">
    <img data-src="http://placehold.it/160x107" data-srcset="http://placehold.it/320x231 320w, http://placehold.it/640x426 640w, http://placehold.it/1000x666 1000w, http://placehold.it/2500x1666 2500w" sizes="(min-width: 768px) 50vw, 100vw" class="lazyload"
      alt="" />
  </div>
  <div class="lazy-wrapper-2 ratio-padding-half">
    <img data-src="http://placehold.it/160x107" data-srcset="http://placehold.it/320x231 320w, http://placehold.it/640x426 640w, http://placehold.it/1000x666 1000w, http://placehold.it/2500x1666 2500w" sizes="(min-width: 768px) 50vw, 100vw" class="lazyload"
      alt="" />
  </div>

css

.ratio-padding {
    padding-bottom: 66.5%; 
    height: 0;
}
.ratio-padding-half {
    padding-bottom: 33.25%; 
    height: 0;
}
.lazy-wrapper {
    position: relative;
    overflow:hidden;
    width: 100%;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    }
.lazy-wrapper-2 {
    width: 100%;
    float:left;
    }
@media (min-width: 768px) {
    .lazy-wrapper-2 {
    width: 50%;
    }
}
.lazy-wrapper img, .lazy-wrapper-2 img {
    max-width: 100%;
    width: 100%
}