画像を読み込む前に、ブラウザから画像サイズを決定するためのsrcset画像をLazysize

Question

流体レイアウトでsrcsetと組み合わせてlazysizesプラグインを使用しています。私はあなたがスクロールするようにページを拡張するのではなく、ブラウザに正しい長さにページをロードさせる方法を理解できません。

私はずっと読みになった後、私は、それが設定されていないと、ブラウザは高さを計算することができないと行うことです確信している、ここで

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

証明するために、ブートストラップのフレームワークを使用してcodepenを行いました私はかなりそれが応答方法

コードで動作させることはできませんが、では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> 

どれHELを言いますpは感謝して受け入れられるでしょう

Answer 1

興味がある方は、imgの周りにラッパーを追加し、パディングボトムをイメージと一致する比率に設定して、ページのリフローの問題を解決しました。私は、次の式をしたので、私の場合、それは9x6のイメージでした

6月9日= 0.6666667×100 = 66.666667

私は50％全幅画像の66.5パーセントと33.25パーセントでセトリング終わりました幅画像特定のサイズにおけるとして試行錯誤のビットの後、ブラウザは、画像

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

ピクセル高すぎると解釈しました