Ng-lazyload-image: आलसी लोड छवि प्रीबूट के साथ काम नहीं करती है

को निर्मित 5 अप्रैल 2018 · 3टिप्पणियाँ · स्रोत: tjoskar/ng-lazyload-image

प्रीबूट (https://github.com/angular/preboot) बनाता है पूरा ऐप शुरुआत में दिखाई नहीं देता है जो आलसी लोड घटक को छवि लोड नहीं करने का कारण बनता है - फ़ंक्शन isVisible झूठा रिटर्न देता है।

fromElement में rect.ts getBoundingClientRect का उपयोग करता है जो इस मामले में 0 आयाम देता है।

त्वरित समाधान offset विशेषता को उदाहरण के लिए 1 जो intersectsWith true लौटाता है।

स्रोत

lares83

👍3

सबसे उपयोगी टिप्पणी

त्वरित समाधान ऑफसेट विशेषता को उदाहरण के लिए 1 पर सेट करना है जो प्रतिच्छेदन को सही बनाता है।

यह वास्तव में एक बग है, ऐसा नहीं होना चाहिए। मैं इसके लिए एक अलग मुद्दा खोलूंगा।

sapierens 8 अप्रैल 2018

👍2

सभी 3 टिप्पणियाँ

हाय @ lares83 ,

मुझे बताने के लिए धन्यवाद। यह काफी पेचीदा मुद्दा है क्योंकि यह जानने का कोई तरीका नहीं है कि छवि कब दिखाई देगी।

आपके सुझाव के अनुसार offset=1 सेट करने के लिए एक क्विकफिक्स है, लेकिन इससे सभी छवियों को लोड होने पर लोड किया जाएगा, भले ही वे व्यूपोर्ट में न हों। ऐसा इसलिए है क्योंकि ng-lazyload-image पास यह जानने का कोई तरीका नहीं है कि छवि दिखाई देने से पहले कहां है और उस समय बहुत देर हो चुकी है (जब तक उपयोगकर्ता स्क्रॉल नहीं करता तब तक हमें कोई नया ईवेंट नहीं मिलेगा)।

इसे ठीक करने का एक तरीका PrebootComplete ईवेंट को सुनना है:

constructor() {
  this.scrollAndPrebootComplete$ = Observable.merge(
    Observable.fromEvent(window, 'scroll'),
    Observable.fromEvent(window, 'PrebootComplete')
  );
}

और फिर टेम्पलेट में:

<img [lazyLoad]="lazyLoadImage" [scrollObservable]="scrollAndPrebootComplete$" />

आप आसानी से एक कस्टम घटक बना सकते हैं जो lazyLoad लपेटता है और scrollAndPrebootComplete$ साथ गुजरता है।

एक अन्य समाधान IntersectionObserver लेकिन इसके लिए #304 को हल करने की आवश्यकता है।

tjoskar 8 अप्रैल 2018

👍1

त्वरित समाधान ऑफसेट विशेषता को उदाहरण के लिए 1 पर सेट करना है जो प्रतिच्छेदन को सही बनाता है।

sapierens 8 अप्रैल 2018

👍2

मैं इसे बंद कर रहा हूं। मुझे बताएं कि ऊपर प्रस्तावित समाधान काम नहीं किया।

tjoskar 24 अप्रैल 2018

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

Ng-lazyload-image: आलसी लोड छवि प्रीबूट के साथ काम नहीं करती है

सबसे उपयोगी टिप्पणी

सभी 3 टिप्पणियाँ

संबंधित मुद्दों