पूर्ण छवि लोड करने के लिए प्रतीक्षा करते समय प्लेसहोल्डर पृष्ठभूमि/छवि?

Question

मेरे पास मेरे पृष्ठ पर कुछ छवियां हैं I मुझे लगता है कि छवियों को लोड होने से पहले प्रस्तुत करना शुरू होता है (जो अच्छा है), लेकिन दृश्य प्रभाव बहुत अच्छा नहीं है।

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

फिर कुछ मिलीसेकेंड बाद में पृष्ठ इस दिखाने के लिए कूदता है:

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

वहाँ एक आसान तरीका है कि मैं वास्तव में चौड़ाई की एक ग्रे पृष्ठभूमि छवि दिखा सकते हैं है शुरू में उपयोगकर्ता यह देखता है और ऊंचाई कि छवि पर कब्जा कर लिया जाएगा, जब तक कि छवि खुद लोड नहीं हो जाती?

जटिल कारक यह है कि मैं छवियों की ऊंचाई और चौड़ाई को पहले से नहीं जानता: वे उत्तरदायी हैं, और बस div के width: 100% पर सेट हैं।

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

यहाँ मूल समस्या को वर्णन करने के लिए एक JSFiddle है:: इस HTML/CSS है http://jsfiddle.net/X8rTB/3/

मैं LazyLoad जैसी चीज़ों से देखा है, लेकिन मैं वहाँ महसूस कर रही एक सरल होना चाहिए मदद नहीं कर सकता, गैर-जेएस उत्तर। या यह तथ्य है कि मैं छवि की ऊंचाई को पहले से ही एक दुर्बल समस्या नहीं जानता? मैं छवियों के पहलू अनुपात को जानता हूँ।

Answer 1

एकमात्र चीज जिसे मैं सोच सकता हूं, आपके पाठ पर कूद प्रभाव को कम करने के लिए, min-height सेट करने के लिए जहां छवि दिखाई देगी, मैं कहूंगा - इसे "छोटी" छवि पर सेट करें जिसे आप जानते हैं। इस तरह कूद कम स्पष्ट होगा और आपको आलसी लोड या इतनी उपयोग करने की आवश्यकता नहीं होगी ... हालांकि यह आपकी समस्या को पूरी तरह से ठीक नहीं करता है।

Answer 2

इसके बजाय सीधे छवि को संदर्भित करने का

, एक DIV के भीतर यह छड़ी, जैसे निम्नलिखित:

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

Answer 3

वहाँ आप से पहले जाँच करने के लिए एक बहुत आसान बात है:

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

फिर अपने सीएसएस में

आलसी लोडिंग और अन्य जेएस में देखना शुरू करें। सुनिश्चित करें कि आपके द्वारा लोड की जा रही जेपीजी छवियों को 'प्रगतिशील' विकल्प सक्षम किया गया है! इससे उन्हें छवि को लोड करने का मौका मिलेगा, जो प्लेसहोल्डर से शुरू होता है जो कम-रिज़ॉल्यूशन और डाउनलोड करने के लिए तेज़ है, प्रतिपादन से पहले उच्चतम डेटा डेटा की प्रतीक्षा करने के बजाय।

Answer 4

यहाँ यह कर में से एक अनुभवहीन तरीका है,

img { बॉक्स छाया: 0 0 10px 0 RGBA (# 000, 0.1); }

आप मूल्यों में हेरफेर कर सकते हैं, लेकिन क्या यह करता है यह छवि है कि सामग्री को धक्का नहीं है चारों ओर एक बहुत हल्का सीमा बनाता है। छवियां जो भी समय चाहें लोड कर सकती हैं, और आपको एक अच्छा उपयोगकर्ता अनुभव मिलता है।

आशा है कि यह मदद करता है कि