Nền giữ chỗ/hình ảnh trong khi chờ tải hình ảnh đầy đủ?

Question

Tôi có một vài hình ảnh trên trang của mình. Tôi thấy rằng trang bắt đầu hiển thị trước khi các hình ảnh đã được tải (tốt), nhưng hiệu ứng hình ảnh không phải là tuyệt vời. Ban đầu người dùng thấy này:

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

Sau đó, một vài mili giây sau trang nhảy để hiển thị này:

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

Có một cách đơn giản mà tôi có thể hiển thị một hình nền màu xám của chính xác độ rộng và chiều cao rằng hình ảnh sẽ chiếm, cho đến khi bản thân hình ảnh tải?

Yếu tố phức tạp là tôi không biết chiều cao và chiều rộng của hình ảnh trước: chúng phản hồi và chỉ được đặt thành width: 100% của div chứa. Đây là HTML/CSS:

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

Dưới đây là một JSFiddle để minh họa cho vấn đề cơ bản: http://jsfiddle.net/X8rTB/3/

Tôi đã nhìn vào những thứ như LazyLoad, nhưng tôi không thể không cảm thấy phải có một đơn giản hơn, câu trả lời không JS. Hoặc là một thực tế là tôi không biết chiều cao của hình ảnh trước một vấn đề không thể vượt qua? Tôi biết tỷ lệ khung hình của hình ảnh.

Answer 1

Điều duy nhất tôi có thể nghĩ đến, để giảm thiểu hiệu ứng nhảy trên văn bản, là đặt min-height thành nơi hình ảnh sẽ xuất hiện, tôi sẽ nói - đặt nó thành hình ảnh "ngắn hơn" bạn biết. Bằng cách này, các bước nhảy sẽ ít rõ ràng hơn và bạn sẽ không cần phải sử dụng lazyLoad hoặc như vậy ... Tuy nhiên nó không hoàn toàn sửa chữa vấn đề của bạn.

Answer 2

Thay vì tham khảo các hình ảnh trực tiếp, dính vào nó trong một DIV, như sau:

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

Sau đó, trong CSS của bạn:

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

Answer 3

Có một điều thực sự đơn giản để kiểm tra trước khi bạn bắt đầu xem xét việc tải chậm và JS khác. Đảm bảo hình ảnh JPG bạn đang tải được lưu với tùy chọn 'tiến bộ' được bật! Điều này sẽ khiến chúng tải hình ảnh lặp lại, bắt đầu bằng trình giữ chỗ có độ phân giải thấp và tải xuống nhanh hơn, thay vì đợi dữ liệu có độ phân giải cao nhất trước khi hiển thị.

Answer 4

Dưới đây là một cách ngây thơ để làm việc đó,

img { hộp-shadow: 0 0 10px 0 rgba (# 000, 0,1); }

Bạn có thể thao tác các giá trị, nhưng nó tạo ra đường viền rất nhẹ xung quanh hình ảnh không đẩy nội dung. Hình ảnh có thể tải bất cứ lúc nào họ muốn và bạn có được trải nghiệm người dùng tốt.

Hy vọng rằng điều này sẽ giúp