Ng-lazyload-image: Lazyload और srcset

नमस्ते,

दुर्भाग्य से यह पुस्तकालय srcset का समर्थन नहीं करता है, लेकिन इसे इसका समर्थन करना चाहिए। यह काफी महत्वपूर्ण विशेषता है।

कहा जा रहा है कि, यह समर्थन करना बहुत आसान नहीं है क्योंकि हमें srcset को उसी तरह से समझने और समझने की आवश्यकता है जैसे ब्राउज़र करता है।

विकल्प 1:

हम srcset को एक विशेष मामले के रूप में मानते हैं और छवि को पृष्ठभूमि में लोड करने का प्रयास नहीं करते हैं, बल्कि इसके बजाय हम केवल srcset सेट करते हैं जब छवि व्यूपोर्ट होती है:
मान लें कि हमारे पास निम्न HTML टैग है:
<img [defaultImage]="defaultImage" lazyLoad="small.jpg 300w, large.jpg 500w">
जब छवि व्यूपोर्ट में होती है तो हम srcset पर एक नज़र डालते हैं और पता लगाते हैं कि lazyLoad में srcset -स्ट्रिंग है और बस टैग को इसमें बदल दें:
<img srcset="small.jpg 300w, large.jpg 500w">

समर्थक:
सरल कार्यान्वयन
कोन:
उपयोगकर्ता कभी भी "डिफ़ॉल्ट छवि" नहीं देखेगा।
हम छवि लोड करते समय नेटवर्क त्रुटि को कभी भी संभाल नहीं सकते हैं।

विकल्प 2:

हम srcset पार्स करते हैं और सबसे अच्छा विकल्प चुनते हैं (जैसे हमें लगता है कि ब्राउज़र को करना चाहिए था)।
मान लें कि हमारे पास निम्न HTML टैग है:
<img [defaultImage]="defaultImage" lazyLoad="small.jpg 300w, large.jpg 500w">
हम पाते हैं कि lazyLoad में srcset और हम स्ट्रिंग को कुछ इस तरह पार्स करते हैं:
[ { url: 'small.jpg', width: 300 }, { url: 'large.jpg', width: 500 } ]
हम इसकी तुलना ब्राउज़र की चौड़ाई (और डिवाइस पिक्सेल अनुपात ) से करते हैं और सबसे अच्छी छवि चुनते हैं। छवि को पृष्ठभूमि में लोड करता है और जब इसे लोड किया जाता है तो हम बस srcset सेट करते हैं और चूंकि छवि कैश में है, इसे तत्काल लोड किया जाएगा।

समर्थक:
छवि आलसी लोड हो जाएगी
उपयोगकर्ता को डिफ़ॉल्ट छवि दिखाई देगी।
हम नेटवर्क त्रुटियों को संभाल सकते हैं (क्या हमें srcset से कुछ अन्य छवि लोड करने का प्रयास करना चाहिए या क्या हमें केवल त्रुटि छवि लोड करनी चाहिए?)
कोन:
किसी स्ट्रिंग को उसी तरह पार्स करना हमेशा मुश्किल होता है जिस तरह से ब्राउज़र को करना चाहिए था; हम शायद कुछ किनारे के उपयोग के मामले को याद करेंगे।
मेरी समझ से, ब्राउज़र हमेशा सबसे बड़ी छवि का उपयोग करेगा यदि वह कैश में संग्रहीत है। चूंकि हमारे पास यह जानने का कोई तरीका नहीं है कि क्या छवि पहले ही लोड हो चुकी है, हमें सबसे अच्छी तरह से फिट की गई छवि को लोड करना होगा (लेकिन सबसे बड़ी छवि हमारे द्वारा srcset सेट करने के बाद दिखाई जाएगी)। उदाहरण के लिए मान लें कि हमारे पास निम्नलिखित srcset small.jpg 300w, large.jpg 500w और स्क्रीन 500 px से कम है लेकिन large.jpg पहले ही लोड हो चुका है। मेरी समझ से, ब्राउज़र को large.jpg पिकेट करना चाहिए था क्योंकि यह कैश में है लेकिन चूंकि हम नहीं जानते हैं कि हम small.jpg लोड करेंगे और जब यह लोड हो जाएगा तो हम srcset सेट करेंगे। large.jpg (हालांकि मैं गलत हो सकता हूं)। यानी हमने अनावश्यक रूप से एक छवि लोड की।

निष्कर्ष:

मुझे लगता है कि विकल्प 2 संभव है (बहुत कठिन नहीं होना चाहिए) और मुझे लगता है कि हमें इसे करना चाहिए। मेरा समय हालांकि अभी काफी सीमित है लेकिन मैं खुशी-खुशी एक पीआर स्वीकार करता हूं :)

नमस्ते @tjoskar , त्वरित उत्तर के लिए धन्यवाद, मैं आपसे सहमत हूं कि दूसरा विकल्प

या डिफ़ॉल्ट ब्राउज़र srcset विकल्प को अनदेखा करें और इसे अपनी निर्णय लेने की प्रक्रिया के रूप में लागू करें और इसे यथासंभव सर्वोत्तम बनाने के लिए इसे समय के साथ ट्यून करें :)

कल्पना

आपको केवल कल्पना का पालन करना है और मेरा मानना ​​है कि युक्ति काफी सीधी है।

लेकिन जैसा कि आपने बताया कि ब्राउज़र कार्यान्वयन जो आप यहां हासिल करना चाहते हैं उसे तोड़ सकते हैं, इसलिए मेरा मानना ​​​​है कि इसे छोड़ दिया जाना चाहिए।

मैंने एक पुल अनुरोध (#231) सबमिट किया है जो दोनों के लिए उत्तरदायी छवि समर्थन जोड़ता है \ मैं किसी इनपुट का इंतजार कर रहा हूं।

यह 3.4.0 । धन्यवाद @sapierens