Ng-lazyload-image: डिफ़ॉल्ट छवि दिखाई नहीं दे रही है

नमस्ते,

उदाहरण पृष्ठ निम्नलिखित सीएसएस शैली का उपयोग कर रहा था:

img {
  opacity: 0;
}
img.ng2-lazyloaded {
  opacity: 1;
}

उदाहरण के लिए, इसका उद्देश्य छवि (और डिफ़ॉल्ट छवि) को तब तक छिपाना था जब तक कि आलसी लोड की गई छवि लोड नहीं हो जाती।

हालांकि, यदि आप opacity: 0; हटाते हैं, तो आपको आलसी लोड की गई छवि लोड होने से पहले डिफ़ॉल्ट छवि देखने में सक्षम होना चाहिए।

मैंने कुछ और उदाहरणों के साथ उदाहरण पृष्ठ को अद्यतन किया है। http://tjoskar.github.io/ng2-lazyload-image/ पर जाएं और डिफ़ॉल्ट छवियों का उपयोग करने का एक उदाहरण देखने के लिए "डिफ़ॉल्ट छवि" पर क्लिक करें।
यदि आप क्रोम का उपयोग कर रहे हैं, तो आप लंबे समय तक लोडिंग समय को अनुकरण करने के लिए देव उपकरण में "नेटवर्क थ्रॉटलिंग" का भी उपयोग कर सकते हैं।

क्या मैंने आपके प्रश्न का उत्तर दिया?

आपके पास यहां उदाहरण कोड है: https://github.com/tjoskar/ng2-lazyload-image/blob/master/example/default-image.component.ts

@tjoskar मैंने सब कुछ करने की कोशिश की है, फिर भी काम नहीं कर रहा है, डिफ़ॉल्ट छवि बिल्कुल दिखाई नहीं देती है, और पथ सही है क्योंकि अगर मैंने आलसी छवि को डिफ़ॉल्ट छवि और डिफ़ॉल्ट छवि लोड के साथ बदल दिया है, तो समस्या तब होती है जब मैंने जांच की Google क्रोम इंस्पेक्टर टूल, मैं देखता हूं कि छवि की स्रोत विशेषता से डिफ़ॉल्ट छवि संलग्न नहीं है, इसके बजाय आलसी लोडर छवि डिफ़ॉल्ट रूप से संलग्न है। कृपया इसके आसपास कोई और रास्ता है? तुम्हारे जवाब के लिए इन्तेजार कर रहा हूँ।

धन्यवाद

@kelvinrolex , मुझे यकीन नहीं है कि मैं अनुसरण करता हूं। यदि छवि जिसे आलसी लोड किया जाना चाहिए वह पहले से ही ब्राउज़र कैश में है, तो डिफ़ॉल्ट छवि कभी दिखाई नहीं देगी। एल्गोरिथ्म इस प्रकार है:

1. डिफ़ॉल्ट छवि को src सेट करें
2. जांचें कि क्या छवि व्यूपोर्ट में है

2.1 यदि छवि व्यूपोर्ट में है, तो आलसी लोड की गई छवि डाउनलोड करना शुरू करें
2.1.1 जब आलसी लोड की गई छवि डाउनलोड हो जाती है, तो आलसी लोड की गई छवि को src
2.2 और 2 . पर जाएँ

मैंने यह दिखाने के लिए एक वीडियो रिकॉर्ड किया है कि डिफ़ॉल्ट छवि कैसे लोड होती है: https://www.youtube.com/watch?v=p4hds8Au_qI

क्या आपके पास एक कोड स्निपेट है जिसे आप साझा कर सकते हैं ताकि मैं बेहतर तरीके से समझ सकूं कि आप क्या करने की कोशिश कर रहे हैं।

धन्यवाद

ऐसा लगता है कि मुझे भी यही समस्या है। अगर मैं [src] = "defaultImage" का उपयोग करता हूं (और, निश्चित रूप से एक डिफ़ॉल्ट छवि संपत्ति है), छवि लोड होने से पहले img टैग की src विशेषता नहीं लिखी जाती है (दृश्य पोर्ट में आता है)।

अगर मैं कोई संपत्ति बाध्यकारी का उपयोग नहीं करता (उदाहरण:

@taseroth , देर से उत्तर के लिए खेद है। आप किस ब्राउज़र और ओएस का उपयोग कर रहे हैं? मैं इसे macOS पर क्रोम/फ़ायरफ़ॉक्स/सफारी में पुन: पेश नहीं कर सकता।
केवल स्पष्ट करने के लिए; यदि आप http://tjoskar.github.io/ng2-lazyload-image/fade-in-image पर जाते हैं और फिर "डिफ़ॉल्ट छवि" लिंक दबाते हैं। क्या तब आपको निकोलस केज पर कोई तस्वीर नहीं दिख रही है?

मेरे साथ भी वही दिक्कत है। डिफ़ॉल्ट छवि प्रदान की जाती है (केवल अगर मैं इसे "src" और हार्डकोडेड प्लेसहोल्डर url के साथ स्पष्ट रूप से रखता हूं)।
इसके अलावा मैंने देखा है कि "स्क्रॉलस्पी" सही ढंग से काम नहीं कर रहा है, कुछ बार लैसीलोड पहले 2 या 3 तत्वों को लोड करता है और
अन्य सभी "तीव्र" स्क्रॉलिंग एक्सडी के बाद भी अपरिवर्तित रहेंगे। ऑफसेट परम इस मुद्दे को प्रभावित नहीं कर रहा है। एक चाल है: यदि मैं पृष्ठ को फिर से लोड करता हूं और कंटेनर लोड होने से पहले नीचे स्क्रॉल करता हूं, तो यह सभी छवियों को लोड करता है ...
कंसोल में या संकलन के दौरान कोई त्रुटि नहीं है।

@ bsh314 , मैं अनुसरण नहीं करता।

डिफ़ॉल्ट छवि प्रदान की जाती है (केवल अगर मैं इसे "src" और हार्डकोडेड प्लेसहोल्डर url के साथ स्पष्ट रूप से रखता हूं)।

आपको डिफ़ॉल्ट छवि के लिए src उपयोग करना चाहिए।
मान लें कि आप निम्न कोड का उपयोग कर रहे हैं: <img [src]="defaultImage" [lazyLoad]="image"> । कोणीय इसे संकलित करेगा और ब्राउज़र को <img src="default-image.jpg"> ( defaultImage = 'default-image.jpg' ) और जब छवि व्यूपोर्ट में होगी, तो क्या निर्देश (ng2-lazyload) छवि-नोड को <img src="lazyload-image.jpg"> अपडेट करेगा image = 'lazyload-image.jpg' )।

इसके अलावा मैंने देखा है कि "स्क्रॉलस्पी" सही ढंग से काम नहीं कर रहा है ...

क्या आप बूटस्ट्रैप स्क्रॉलस्पी का संदर्भ दे रहे हैं? क्या आप स्क्रॉलस्पी के बिना त्रुटि को पुन: उत्पन्न कर सकते हैं?

@tjoskar नहीं, मैं बूटस्ट्रैप का उपयोग नहीं कर रहा हूं, यह केवल उस प्रकार की कार्यक्षमता को नाम देने का तरीका था।
मेरी डिफ़ॉल्ट छवि समस्या:
<img src="default-image.jpg" [lazyLoad]="image"> -> यह काम करता है
<img [src]="defaultImage" [lazyLoad]="image"> -> यह काम नहीं करता
उत्तर के लिए धन्यवाद!

मेरी भी यही समस्या है। यह केवल तभी काम करता है जब टेम्पलेट में img url हार्ड-कोडेड हो।
आपने इसे अपने उदाहरण में हार्ड-कोड किया है:

// https://github.com/tjoskar/ng2-lazyload-image/blob/master/example/default-image.component.ts
<img
        *ngFor="let image of images"
        src="https://www.placecage.com/1000/1000"
        [errorImage]="errorImage"
        [lazyLoad]="image">

संपादित करें: और शायद यह भी काम करता है अगर एओटी आपके लिए टेम्पलेट में यूआरएल को हार्ड-कोड कर सकता है। मेरे मामले में मुझे अपने पिछले एपीआई कॉल से डिफ़ॉल्ट छवि यूआरएल मिलता है, इसलिए यह गतिशील है। मेरा लक्ष्य डिफ़ॉल्ट छवि का उपयोग निम्न गुणवत्ता पूर्वावलोकन और इसे बदलने के लिए आलसी-लोड उच्च गुणवत्ता वाली छवि के रूप में करना है।

@ फिलिप्सुक : हाँ, ऐसा लगता है कि यह मुद्दा है। मुझे विश्वास नहीं हो रहा है कि मैं उस विवरण से चूक गया।

इस मुद्दे को 2.3.2 संस्करण में हल किया जाना चाहिए। कृपया इसे एक कोशिश का मौका दीजिए।

@tjoskar समस्या 2.3.2 में तय की गई प्रतीत होती है। आपके काम के लिए बहुत-बहुत धन्यवाद! :)

मैं इसे अब बंद करने जा रहा हूं। कृपया मुझे बताएं कि आप में से किसी के पास अभी भी समस्या है।