Symbol zastępczy tła/obrazu podczas oczekiwania na załadowanie pełnego obrazu?

Question

Mam kilka zdjęć na mojej stronie. Stwierdzam, że strona zaczyna się renderować przed załadowaniem obrazów (co jest dobre), ale efekt wizualny nie jest świetny. Początkowo użytkownik widzi to:

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

Następnie kilka milisekund później strona wyskakuje to pokazać:

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

Czy istnieje prosty sposób, że mogę pokazać szarym tle obraz dokładnie szerokość i wysokość, że obraz będzie zajmował, dopóki sam obraz się nie załaduje?

Czynnikiem komplikującym jest to, że nie wiem z góry wysokości i szerokości obrazów: są one responsywne i ustawione są na width: 100% zawierającego element div. To jest HTML/CSS:

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

Oto JSFiddle do zilustrowania podstawowego problemu: http://jsfiddle.net/X8rTB/3/

Przyjrzeliśmy się rzeczy jak LazyLoad, ale nie mogę się oprzeć wrażeniu, że musi być prostsze, odpowiedź nie-JS. Czy też fakt, że nie znam wysokości obrazu z góry, jest problemem nie do pokonania? Znam proporcje obrazów.

Answer 1

Jedyne, co mogę wymyślić, aby zminimalizować efekt skoku na tekście, to ustawić min-height na miejsce, w którym obraz pojawi się, powiedziałbym - ustawić go na "krótszy" obraz, który znasz. W ten sposób skok będzie mniej widoczny, a Ty nie będziesz musiał używać lazyLoad lub tak ... Jednak nie rozwiązuje to całkowicie twojego problemu.

Answer 2

Zamiast o przedstawieniu obrazu bezpośrednio, trzymać go w DIV, jak następuje:

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

Następnie w CSS:

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

Answer 3

Jest bardzo prosta rzecz do sprawdzenia przed wami zacznij leniwego ładowania i innych JS. Upewnij się, że ładowane obrazy JPG są zapisywane z włączoną opcją "progresywne"! Spowoduje to, że będą one ładować obrazowo iteracyjnie, zaczynając od elementu zastępczego o niskiej rozdzielczości i szybszego pobierania, zamiast czekać na najwyższe dane res przed renderowaniem.

Answer 4

Oto jeden sposób to naiwny go

IMG { skrzynkowej cień 0 0 10px 0 rgba (# 000: 0,1); }

Można manipulować wartościami, ale to, co tworzy, tworzy bardzo jasną ramkę wokół obrazu, która nie przesuwa zawartości. Obrazy mogą być ładowane w dowolnym momencie, a Ty możesz cieszyć się komfortem użytkowania.

nadzieję, że pomoże