Tam resmin yüklenmesini beklerken yer tutucu arka plan/görüntü mü?

Question

Sayfanın bir kaç resmim var. Görüntünün yüklenmesinden önce (bu iyi) sayfanın oluşturulmaya başladığını, ancak görsel efektin harika olmadığını buluyorum. Ben tam genişliği bir gri arka plan resmi gösterebilir basit bir yolu var mı

--------hr-------- 
[   ] 
[ image ] 
[   ] 
text 

:

--------hr-------- 
text 

Sonra birkaç milisaniye sonra sayfa Bunu göstermek için atlar: Başlangıçta kullanıcı bunu görür ve görüntü kendisini yükleyene kadar resmin kaplayacağı yüksekliğini mi?

Komplike edici faktör, görüntülerin yüksekliğini ve genişliğini önceden bilmememdir: bunlar yanıt vericidir ve yalnızca içeren div dosyasının width: 100% değerini belirlemiştir.

<div class="thumbnail"> 
<img src="myimage.jpeg" /> 
<div class="caption">caption</div> 
</div> 
img { width: 100% } 

Burada temel sorunu göstermek için bir JSFiddle var: Bu HTML/CSS olan http://jsfiddle.net/X8rTB/3/

Ben LazyLoad gibi şeyler içine baktım ama daha basit olmalı orada düşünmeden edemiyorum, JS olmayan cevap. Ya da görüntünün yüksekliğini önceden aşılmaz bir problem olarak bilmemem gerçeği mi? Görüntülerin en boy oranını biliyorum. Bildiğin "daha kısa" görüntüye ayarlayın -

Answer 1

Ben, aklınıza gelebilecek metin üzerinde atlama etkisini en aza indirmek için tek şey diyebilirim, görüntü belirecektir yere min-height ayarlamaktır. Bu şekilde atlama daha az belirgin olacak ve lazyLoad kullanmanız gerekmeyecek ya da öyle olmayacak ... Ancak sorununuzu tamamen düzeltmiyor. Bunun yerine, doğrudan görüntü başvurma olmak

Answer 2

gibi, bir DIV içinde sopa aşağıdadır:

.placeholder { 
    width: 300; 
    height: 300; 
    background-repeat: no-repeat; 
    background-size: contain; 
    background-image: url('my_placeholder.png'); 
} 

Answer 3

önce kontrol etmek gerçekten basit bir şey yoktur: CSS'nizde Sonra

<div class="placeholder"> 
    <div class="myimage" style="background-image: url({somedynamicimageurl})"><img /></div> 
</div> 

tembel yükleme ve diğer JS bakmaya başlayın. Yüklediğiniz JPG görüntüleri etkin 'ilerici' seçeneği ile kaydedildiğinden emin olun! Bu, görüntüyü, görüntülemeden önce en yüksek çözünürlükte beklemek yerine, düşük çözünürlüklü ve daha hızlı indirilebilen bir yer tutucuyla başlayarak, tekrar tekrar görüntü yüklemelerine neden olur.

Answer 4

Burada bunu yapmanın bir naif yolu,

img { kutu gölge: 0 0 10px 0 RGBA (# 000, 0.1); }

Sen değerlerini işlemek, ama ne yapar onu içeriğini itmek değil resmin etrafında çok hafif sınırını oluşturur olduğunu olabilir. Görüntüler istedikleri zaman yükleyebilir ve iyi bir kullanıcı deneyimi kazanırsınız. o