Lazysizes srcset 图像获取浏览器以确定图像加载之前的总页面大小答案

【问题标题】：Lazysizes srcset images getting browser to determine total page size before images loadLazysizes srcset 图像获取浏览器以确定图像加载之前的总页面大小
【发布时间】：2016-04-05 18:31:49
【问题描述】：

我将lazysizes 插件与srcset 一起用于流畅的布局。我不知道如何让浏览器将页面加载到正确的长度，而不是在滚动时扩展页面。

我用bootstrap框架做了一个codepen来演示一下

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>

任何帮助将不胜感激

【问题讨论】：

标签： css twitter-bootstrap lazy-loading srcset responsive

【解决方案1】：

对于任何感兴趣的人，我通过在 img 周围添加一个包装器并将 padding-bottom 设置为与图像匹配的比率来解决我的页面重排问题。在我的例子中，它是一个 9x6 的图像，所以我做了以下等式

6 / 9 = 0.6666667 * 100 = 66.666667

经过一些试验和错误后，我最终确定了 66.5% 的全宽图像和 33.25% 的 50% 宽图像，因为在某些尺寸下，浏览器将图像解释为 1px 太高

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%
}

【讨论】：