Lazysizes srcset images Browser wird zur Bestimmung der Gesamtgröße vor dem Laden der Bilder benötigt

Question

Ich benutze das Lazysizes-Plugin in Verbindung mit srcset in einem flüssigen Layout. Ich kann nicht herausfinden, wie man den Browser dazu bringt, die Seite auf die richtige Länge zu laden, anstatt die Seite beim Blättern zu erweitern.

Ich habe einen codepen mit dem Bootstrap-Rahmen gemacht hier

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

Nach viel Lesen zu zeigen, ich bin sicher, dass es mit der Browser nicht in der Lage zu tun ist, ist die Höhe zu berechnen, wie es nicht gesetzt ist aber ich kann nicht ganz bekommen sie in einer ansprechenden Art und Weise

-Code zu arbeiten, aber mit beispielsweise 10 Zeilen

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

Alle hel p würde dankbar akzeptiert werden

Answer 1

Für alle, die interessiert sind, löste ich das Problem meiner Seite Reflowing durch Hinzufügen eines Wrappers um den IMG und die Festlegung der Padding-Boden auf ein Verhältnis, das dem Bild entspricht. In meinem Fall war es ein 9x6 Bild, damit ich die folgende Gleichung habe

6/9 = 0,6666667 * 100 = 66,666667

Ich landete mit 66,5% für eine volle Breite Bild Absetz- und 33,25% für ein 50% Breites Bild nach einem bisschen von Versuch und Irrtum, wie bei bestimmten Größen des Browser das Bild zu interpretieren zu groß

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

px werden