Ng-lazyload-image: व्यूपोर्ट पर दिखाई देने वाली छवियों को लोड करें

को निर्मित 29 मार्च 2019 · 5टिप्पणियाँ · स्रोत: tjoskar/ng-lazyload-image

जब पृष्ठ लोड होता है, तो डिफ़ॉल्ट छवियां व्यूपोर्ट पर आलसी लोड में नहीं बदलती हैं, केवल जब स्क्रॉल शुरू होता है तो छवियां दिखाई दे रही हैं, मैं व्यूपोर्ट पर मौजूद छवियों को कैसे संभाल सकता हूं? धन्यवाद

स्रोत

AzerHeshim

👍1

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

हाय @zieka ,

समस्या यह है कि छवि छिपी हुई है जब ng-lazyload-image अंदर आती है और इसके लिए व्यूपोर्ट के बाहर छवि को खतरा होगा (छवि की कोई स्थिति नहीं है, इसे प्रस्तुत नहीं किया गया है और यह जानने का कोई तरीका नहीं है कि यह कब दिखाई देता है, और अगर यह व्यूपोर्ट में है तो फिर से सत्यापित करें)।

हालांकि इसे हल करने के तीन तरीके हैं।

IntersectionObserver का उपयोग करना (अनुशंसित तरीका)
बस अपने मॉड्यूल में intersectionObserverPreset जोड़ें:

import { LazyLoadImageModule, intersectionObserverPreset } from 'ng-lazyload-image';

...
LazyLoadImageModule.forRoot({
  preset: intersectionObserverPreset
})
...

छुपा के बजाय दृश्यमान का प्रयोग करें। यदि छवि अभी भी अपनी स्थिति में है यदि वह दिखाई नहीं दे रही है।
अपना खुद का scrollObservable बनाएं जो स्क्रॉल इवेंट और activeRecipeIndex (आपके मामले में) को बदलने वाली घटना को मर्ज करता है। आप चाहें तो इसमें मैं आपकी मदद कर सकता हूं।

tjoskar 3 अप्रैल 2019

👍2 🎉1

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

वह आवाज अजीब। आप ng-lazyload-image किस संस्करण का उपयोग कर रहे हैं? आप कौन सा ब्राउज़र उपयोग कर रहे हैं? क्या यह अन्य ब्राउज़रों (फ़ायरफ़ॉक्स/क्रोम/सफारी/एज/आईओएस/एंड्रॉइड) में समान व्यवहार है? क्या आप सुनिश्चित हैं कि जब तक आप स्क्रॉल करना शुरू नहीं करते तब तक छवि लोड नहीं होती है?
क्या त्रुटि को पुन: उत्पन्न करने के लिए एक छोटा रेपो बनाना संभव है? या जीआईएफ/वीडियो रिकॉर्ड करें?

tjoskar 30 मार्च 2019

क्रोम, फ़ायरफ़ॉक्स और एज पर मेरा एक ही मुद्दा है। मैं उस घटक पर [छुपा] (डिफ़ॉल्ट रूप से सत्य) का उपयोग कर रहा हूं जिसमें आलसी लोड छवियां हैं।
जब छिपा हुआ झूठा हो जाता है, तो घटक प्रतिपादन कर रहा होता है लेकिन छवि डिफ़ॉल्ट (लोडर) होती है, केवल स्क्रॉल छवियों को आकर्षक बनाते हैं।

घटक में मेरा आईएमजी टैग:

<img [lazyLoad]="recipe.image"
          [offset]="100"
          src="ng-assets/animations/recipe-loader.gif">

और मेरा घटक:

<app-recipe *ngFor="let recipe of recipes; let i = index;"
                     [hidden]="activeRecipeIndex !== i"
                     [recipe]="recipe">
</app-recipe>

ziunio 3 अप्रैल 2019

हाय @zieka ,

हालांकि इसे हल करने के तीन तरीके हैं।

IntersectionObserver का उपयोग करना (अनुशंसित तरीका)
बस अपने मॉड्यूल में intersectionObserverPreset जोड़ें:

import { LazyLoadImageModule, intersectionObserverPreset } from 'ng-lazyload-image';

...
LazyLoadImageModule.forRoot({
  preset: intersectionObserverPreset
})
...

छुपा के बजाय दृश्यमान का प्रयोग करें। यदि छवि अभी भी अपनी स्थिति में है यदि वह दिखाई नहीं दे रही है।
अपना खुद का scrollObservable बनाएं जो स्क्रॉल इवेंट और activeRecipeIndex (आपके मामले में) को बदलने वाली घटना को मर्ज करता है। आप चाहें तो इसमें मैं आपकी मदद कर सकता हूं।

tjoskar 3 अप्रैल 2019

👍2 🎉1

हैलो, @tjoskar मैंने [offset]=800 का उपयोग करके इस समस्या को हल किया है, लेकिन मुझे यकीन नहीं है कि यह इसे ठीक करने का सबसे उपयुक्त तरीका है, आपको क्या लगता है?

AzerHeshim 4 अप्रैल 2019

धन्यवाद @tjoskar यह काम करता है :) मैं पहला विकल्प चुनता हूं :)

ziunio 4 अप्रैल 2019

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

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

Ng-lazyload-image: व्यूपोर्ट पर दिखाई देने वाली छवियों को लोड करें

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

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

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