"Duyarlı" görüntülerle tembel yükleme (bilinmeyen yükseklik)

Question

Yüzdelere dayalı bir CSS ızgara sistemi kullanıyorum. Sayfanın toplam genişliğinin% 25'i olan 4 sütunlu bir ızgaram var. Böyle her bir "% 25 hücrenin" içinde çıktı benim resim etiketleri: tarayıcı boyutlandırır

<img src="foo.jpg" style="max-width:100%" /> 

gibi, resimleri de her% 25 hücrenin% 100 doldurmak için yeniden boyutlandırmak. Tarayıcı, "height: auto" (benim çıkardığım zaman örtülü olan) koydummuş gibi bir yükseklik alır.

Şimdi buna tembel yükleme yeteneği eklemek istiyorum. Sorun, resimler yüklenmeden önce sayfadaki yüksekliklerinin bilinmemesidir. Tarayıcı, görüntüyü & en boy oranını gözlemlemek ve bunun için bir yükseklik hesaplamak zorundadır. Bundan önce, tüm görüntüler 1px'lik bir yüksekliğe sahip. Her görüntünün 1px'lik bir yüksekliğe sahip olması nedeniyle, hepsi "viewport" olarak kabul edilir ve hemen yüklenir. Şu

Ben önce img etiketi çıkarılmasına kavramının kanıtı var, bir veri özelliğinde görüntüler boy sunucusunda oranını ve çıkışını hesaplamak: olay üzerine, Sonra

<img src="foo.jpg" style="max-width:100%" data-aspect="1.7742" /> 

"belge hazır", ben her resmin döngü ve öncesinde tembel yükleme piksel sabit height değerini ayarlayın:

Bu anlamda, çalışıyor gibi görünüyor

$('img').each(function() { 
     var img = $(this); 
     var width = img.width(); 
     var ratio = img.data('aspectratio'); 
     var height = width/ratio; 
     $(this).css('height', height+'px'); 
    }); 

aynı azından artık yükleri tüm görüntüleri zaman, ancak sadece kaydırırken görüntüleri yükler. Ancak, kullanıcı tarayıcıyı yeniden boyutlandırdığında görüntüler uzayacak gibi yeni sorunlara neden olabilir gibi görünüyor. Bir geri yükleme, tembel yükleme işlemi tamamlandığında, "yükseklik" i tekrar "otomatik" olarak değiştirmem gerekir. Bu, kullanıcının gördüğü görüntülerle ilgilenir - ancak tarayıcının yeniden boyutlandırılmasından sonra ekranın altındaki görüntüler yine de uygunsuz bir "yükseklik" değerine sahip olur. Tarayıcı her yeniden boyutlandırıldığında, daha önce katın altındaki tüm görüntüleri yinelemeli, güncellenmiş genişliklerini ölçmeli, en boy oranlarını okuyabiliyor ve yeni yüksekliği güncelleyebiliyor, sonra da şimdi yukarısında olan her şeyi işlemek için tembel yükleme işlemini geri çekiyordum. kat. Bunu yapmazsam, yanlış yükseklik değerine sahip görüntüler nedeniyle yükleme çok erken veya çok geç tetiklenebilir.

Sorum şu: Burada tarif ettiğim yöntemden başka, bilinmeyen yüksekliğe sahip tembel yük resimlerinin başka yolları da var mıdır? Metodum için, programlamak için bir acı olmaktan başka olumsuzluk var mı?

Answer 1

Isotope'u Lazy Load ile uyumlu bir düzende birleştirerek benzer bir sorunla karşılaştım. İzotop, sayfa yüklendiğinde görüntülerin genişliğine ve yüksekliğine bağlı olarak düzeni belirler, böylece başlangıçta tüm öğeler çakıştı çünkü Isotope doğru boyutu hesaplamıyordu.

<article class="portfolio-item"> 
     <a class="portfolio-link" href="img/gallery/thumb90.jpg" style="padding-bottom: 66.2%"> 
      <div class="portfolio-image-wrapper"> 
       <img class="portfolio-image" data-original="img/gallery/thumb90.jpg" width="1000" height="662"> 
      </div> 
      <div class="portfolio-text"> 
       <h1 class="portfolio-item-name"> 
        <span href="#" class="icon" data-icon="e"></span> 
        <span class="portfolio-item-tags">Bridals</span> 
       </h1> 
      </div> 
     </a> 
    </article> 

var: İşte benim biçimlendirme var (. O kesin sonrası olmamıştır olabilir rağmen) http://thisisthat.co.uk/notebook/2013-10-07-lazy-loading-responsive-images: tutucu öğeler yerden tasarruf emin olmak için

, sana söz padding-bottom numara kullanılmaktadır Muhtemelen ihtiyaç duyduğunuzdan daha fazla söz sahibi olursunuz (.portfolio-text div'in tamamıyla biraz stil şekillendiren bir yer paylaşımıdır). Gerçek anahtar, resmin genişliğini ve yüksekliğini (PHP'de yaptığım şablonda yaptığım gibi) temel dolgusu hesaplamak ve o alanı doldurmak istediğim malzemenin alt dolgusu olarak ayarlamaktı.

Answer 2

İşte yorumlardan daha şık bir çözüm. Hala en-boy oranı sunucu tarafı yazma gerektirir, ama sargı div ile: JS sonra

<div class="lazy"><img src="foo.jpg" style="max-width:100%" data-aspect="0.75" /></div> 

I Ambalaj malzemesine div bir padding-bottom elde Bu div tam boyutları veren

$('div.lazy').livequery(function() { 
    var c = $(this); 
    var r = c.data('ar'); 
    c.css('padding-bottom', r * 100 + '%'); 
}); 

bu img sonunda tüketecektir. Sonra alanına görüntüyü yüklemek için AZ aşağıdaki kullanmak padding tüketir:

div.lazy { 
    max-width:100%; 
    position:relative; 
    img { 
    position:absolute; 
    width:100%; 
    height:100%; 
    } 
} 

Answer 3

bile temizleyici:

1. Keyfi olarak çok sayıda Seti yüksekliği ve görüntülerin genişliği (gibi 2000px x 1000px)
2. (belki paylaşılan sınıfın aracılığıyla) istenen görüntülerin her birine şu CSS uygulayın:
   max-width: 100% ve height: auto
3. Gülümseme wi Bu yaklaşım için de :)

Kredi this Github issue