"उत्तरदायी" छवियों (अज्ञात ऊंचाई) के साथ आलसी लोडिंग

Question

मैं एक सीएसएस ग्रिड सिस्टम का उपयोग कर रहा हूं जो प्रतिशत पर आधारित है। मेरे पास 4 कॉलम के साथ ग्रिड है, पृष्ठ की कुल चौड़ाई का प्रत्येक 25%। मैं इस तरह प्रत्येक "25% सेल" के अंदर उत्पादन मेरी छवि टैग: ब्राउज़र आकार बदलता है

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

के रूप में, छवियों को भी प्रत्येक 25% सेल की 100% में भरने के लिए आकार बदल दें। ब्राउजर ऊंचाई बढ़ाता है, जैसे कि मैंने "ऊंचाई: ऑटो" रखा था (जो छोड़े जाने पर निहित है)।

अब मैं आलसी लोडिंग क्षमता को जोड़ना चाहता हूं। समस्या यह है कि छवियों को लोड करने से पहले, पृष्ठ पर उनकी ऊंचाई अज्ञात है। ब्राउज़र को छवि डाउनलोड करना है & इसके पहलू अनुपात का निरीक्षण करें, और इसके लिए ऊंचाई की गणना करें। इससे पहले, सभी छवियों की ऊंचाई 1px है। चूंकि प्रत्येक छवि में 1 पीएक्स की ऊंचाई होती है, इसलिए उन्हें सभी को "व्यूपोर्ट के भीतर" माना जाता है और तुरंत लोड किया जाता है।

वर्तमान में मैं अवधारणा का एक सबूत जहां पहले img टैग outputting करने के लिए है, मैं सर्वर पर छवि के पहलू अनुपात, और उत्पादन एक डेटा विशेषता में गणना:

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

फिर, घटना पर "दस्तावेज़ तैयार ", मैं हर छवि के माध्यम से लूप और पूर्व आलसी लोडिंग के पिक्सल में एक निश्चित 'ऊंचाई' मान सेट:

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

यह काम करने अर्थ में, लगता है कि यह अब लोड सभी एक ही पर छवियों समय, लेकिन स्क्रॉल के रूप में केवल छवियों को लोड करता है।

हालांकि, ऐसा लगता है कि यह नई समस्याओं का कारण बन सकता है, जैसे छवियों को ब्राउज़र का आकार बदलता है। कॉलबैक आलसी लोडिंग के लिए आग लगने पर मुझे 'ऊंचाई' को वापस 'ऑटो' पर स्विच करना होगा। यह उपयोगकर्ता द्वारा देखी जाने वाली छवियों का ख्याल रखेगा - लेकिन गुना के नीचे की छवियों का अभी भी ब्राउज़र का आकार बदलने पर अनुचित 'ऊंचाई' मान होगा। हर बार जब ब्राउज़र का आकार बदलता है, तो मुझे उन सभी छवियों को फिर से चालू करना होगा जो पहले गुना के नीचे थे, उनकी अद्यतन चौड़ाई मापते हैं, उनके पहलू अनुपात को पढ़ते हैं, और नई ऊंचाई अपडेट करते हैं, और फिर आलसी लोडिंग को फिर से ऊपर ले जाने के लिए कुछ भी संभालते हैं तह। यदि मैं ऐसा नहीं करता हूं, तो गलत छवि मान वाले छवियों के कारण लोडिंग बहुत जल्दी या बहुत देर हो सकती है।

मेरा सवाल यह है कि अज्ञात ऊंचाइयों के साथ आलसी लोड छवियों के अन्य कोई अन्य तरीके हैं, मैंने यहां वर्णित सटीक विधि के अलावा, और इसमें क्या ramifications होगा? क्या कार्यक्रम के लिए दर्द होने के अलावा, मेरी विधि के लिए कोई नकारात्मक पक्ष है?

Answer 1

मुझे हाल ही में एक ही समस्या थी, IsotopeLazy Load के साथ एक उत्तरदायी लेआउट में संयोजन। आइसोटोप पेज लोड होने पर छवियों की चौड़ाई और ऊंचाई के आधार पर लेआउट निर्धारित करता है, इसलिए शुरुआत में, आइटम सभी ओवरलैपिंग थे क्योंकि आइसोटोप सही आकार की गणना नहीं कर रहा था।

यकीन प्लेसहोल्डर आइटम अंतरिक्ष बचा रहे थे बनाने के लिए, मैं padding-bottom चाल आप का उल्लेख प्रयोग किया है: http://thisisthat.co.uk/notebook/2013-10-07-lazy-loading-responsive-images (हालांकि यह नहीं हो सकता है किया गया है कि सटीक पोस्ट।) यहाँ मेरी मार्कअप है:

<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> 

है कि शायद आपको जितना अधिक शामिल होना चाहिए (जैसा कि संपूर्ण .portfolio-text div एक ओवरले है जिसमें स्टाइल चल रहा है)। वास्तविक कुंजी छवि की चौड़ाई और ऊंचाई (जो मैंने PHP के साथ टेम्पलेट में किया था) के आधार पर नीचे पैडिंग की गणना करने और उस आइटम के पैडिंग-तल के रूप में सेट करने के लिए किया था जिसे मैं अंतरिक्ष को सहेजना चाहता था।

Answer 2

यहां टिप्पणियों से अधिक सुरुचिपूर्ण समाधान है। यह अभी भी पहलू अनुपात सर्वर साइड लेखन की आवश्यकता है, लेकिन एक आवरण div साथ:

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

तब जे एस के साथ

मैं आवरण div एक padding-bottom दे:

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

यह div सटीक आयाम देता है कि img अंततः उपभोग करेगा। मैं तो क्षेत्र के भीतर छवि को लोड करने कम निम्न का उपयोग padding की खपत:

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

Answer 3

यहां तक ​​कि क्लीनर:

1. ऊँचाई स्थापित और एक मनमाने ढंग से-बड़ी संख्या के लिए छवियों की चौड़ाई (जैसे 2000px x 1000px)
2. वांछित छवियों में से प्रत्येक के लिए निम्न सीएसएस लागू करें (एक साझा वर्ग के माध्यम से शायद):
   max-width: 100% और height: auto
3. मुस्कान वाई इस दृष्टिकोण के लिए डी :)

क्रेडिट Github उपयोगकर्ता dryabove को जाता है, this Github issue