Lazysizes srcset resimler görüntü yüklenmeden önce toplam sayfa boyutunu belirliyor tarayıcısını destekliyor

Question

Sıvı yerleşimli bir srcset ile bağlantılı olarak lazysizes eklentisini kullanıyorum. Sayfayı, sayfayı kaydırırken sayfayı genişletmek yerine doğru uzunlukta yüklemek için tarayıcıyı nasıl alacağımı anlayamıyorum.

Ben o set değil gibi tarayıcı yüksekliğini hesaplamak mümkün olmayan bir ilgisi eminim burada

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

çok okumadan sonra göstermek için önyükleme çerçevesini kullanarak bir codepen yaptık ama oldukça bir duyarlı bir şekilde

Kod çalışmak için alamayan fakat 10 satır

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

Herhangi hel demek P minnetle

Answer 1

kabul edilir. Ben ilgilenen herkes için img etrafında bir sarıcı ekleyerek ve doldurma altını görüntü ile eşleşen bir orana ayarlayarak sayfamın yeniden doldurma sorununu çözdüm. Aşağıdaki denklem yaptım böylece Benim durumumda bir 9x6 görüntü oldu

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

Ben% 50 için tam genişlikte görüntü için 66.5 ve% 33.25 ile% yerleşme sona erdi genişliği, resim belirli boyutlarda olarak deneme-yanılma biraz sonra tarayıcı görüntü yorumlanır çok uzun 1px için

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