Ng-lazyload-image: मैं मैन्युअल रूप से छवियों के लोडिंग को कैसे ट्रिगर कर सकता हूं?

हाय @philipgiuliani ,

समस्या यह है कि ng-lazyload-image केवल यह चेक करती है कि उपयोगकर्ता स्क्रॉल करते समय छवि व्यूपोर्ट में है या नहीं। जब तक कोई स्क्रॉल इवेंट नहीं होता है, तब तक ng-lazyload-image कुछ भी नहीं करेगा।

तो आपके उपयोग के मामले को हल करने के लिए हमें ng-lazyload-image को यह बताने की आवश्यकता है कि इसके आसपास की दुनिया बदल गई है। ऐसा करने के दो तरीके हैं:

1. एक स्क्रॉल घटना फायरिंग। यह ng-lazyload-image को पुनर्जीवित करने के लिए ट्रिक करेगा यदि चित्र व्यूपोर्ट में हैं या नहीं। लेकिन उसका समाधान सुंदर नहीं है (जैसा कि आपने संकेत दिया है)।
2. स्क्रॉल ईवेंट के साथ अपनी स्ट्रीम बनाना और अपने कस्टम ईवेंट के साथ मर्ज करना:

// In your component

constructor() {
  this.updateSearchResult$ = new Subject();
  this.scrollAndSearch$ = Observable.merge(
    Observable.fromEvent(window, 'scroll')
    this.updateSearchResult$
  );
}

onSerachResultResponse() {
  this.updateSearchResult$.next()
}

// in your template
<img [lazyLoad]="lazyLoadImage" [customObservable]="scrollAndSearch$" />

क्या इससे आपके प्रश्न का उत्तर मिला?

मैं इसी तरह की समस्या के समाधान के लिए खोज कर रहा था, और इसे साझा करना चाहता हूं, क्योंकि मुझे संदेह है कि यह मुद्दा वह है जहां लोग संभवतः इसे पाएंगे।

समस्या : एक देरी के बाद छवियों को लोड करें, भले ही वे ऑफसेट के भीतर दिखाई न दें
समाधान : एक निश्चित ऑफ़सेट के बजाय, ऑफ़सेट मानों के लिए एक ऑब्जर्वेबल बनाएं, और वांछित समय के बाद वास्तव में उच्च ऑफसेट सेट करें

// in the Angular 2+ component
constructor () {
  this.imageLoadOffset$ = Observable.merge(
    Observable.of(300),                 // initial offset
    Observable.of(100000).delay(5000)   // offset triggering loading after 5 seconds
  );
}

// in the template
<img [lazyLoad]="'foo.png'" [offset]="imageLoadOffset$ | async" />

आपके योगदान के लिए धन्यवाद, मैंने रीडमी फ़ाइल में इस मुद्दे का लिंक जोड़ा।

जब मैं कंटेनर को जल्दी से स्क्रॉल करता हूं, तो स्क्रॉल की गई छवि लोड नहीं होती है। स्क्रॉल करने के बाद, मैं छवि को वर्तमान व्यूपोर्ट में लोड करता हूं। मुझे क्या करना चाहिए? ?

@pangshangggg , क्षमा करें, लेकिन मुझे समझ नहीं आया। मैंने Google अनुवाद का उपयोग करने की कोशिश की लेकिन मुझे आपका प्रश्न समझ में नहीं आया: / क्या आपके लिए अंग्रेजी में लिखना संभव है?

Ionic 2/3 में, उपयोगकर्ता लोड होने तक चित्र लोड नहीं करते हैं। आप इसे दो तरीकों से हल कर सकते हैं:
कुरूप तरीका इस तरह है:

@ViewChild(Content) container: Content;
ionViewDidEnter() {
      this.container.scrollTo(this.container.scrollLeft, this.container.scrollTop + 1);
      this.container.scrollTo(this.container.scrollLeft, this.container.scrollTop - 1);
   }

और यह अच्छा तरीका है:

@ViewChild(Content) container: Content;
contentLoaded: Subject<any> = new Subject();
loadAndScroll: Observable<any>;

ionViewDidEnter() {
      this.contentLoaded.next();
}
ionViewDidLoad() {
      this.loadAndScroll = Observable.merge(
         this.container.ionScroll,
         this.contentLoaded
      );
}

(in the template : [customObservable]="loadAndScroll" )

मैंने बस आयनिक के ऊपर पोस्ट किए गए समाधानों को ट्रांसपोंड किया। और कुछ नहीं :)

कोणीय 6 और rxjs 6 में, मैं पिछले उदाहरणों का अनुसरण करके स्क्रॉल इवेंट द्वारा मैन्युअल रूप से आलसी लोड को ट्रिगर करने की कोशिश कर रहा हूं लेकिन यह काम नहीं कर रहा है। सभी चित्र पृष्ठ को स्क्रॉल किए बिना एक के बाद एक लोड हो रहे हैं। यह मेरा कोड है।

साँचा:

<div *ngFor="let image of images">
    <img [defaultImage]="defaultImage"
    [lazyLoad]="image"
    [useSrcset]="true"
    [offset]="offset" [scrollObservable]="scrollObservable" >
</div>

घटक:
scrollObservable = fromEvent(window, 'scroll');

मैंने 224 के अंक से इस उदाहरण का अनुसरण किया जहां एल-दावो ने कहा कि यह कोणीय 5 में समस्या को ठीक करता है

Ionic 2/3 में, उपयोगकर्ता लोड होने तक चित्र लोड नहीं करते हैं। आप इसे दो तरीकों से हल कर सकते हैं:
कुरूप तरीका इस तरह है:

@ViewChild(Content) container: Content;
ionViewDidEnter() {
      this.container.scrollTo(this.container.scrollLeft, this.container.scrollTop + 1);
      this.container.scrollTo(this.container.scrollLeft, this.container.scrollTop - 1);
   }

और यह अच्छा तरीका है:

@ViewChild(Content) container: Content;
contentLoaded: Subject<any> = new Subject();
loadAndScroll: Observable<any>;

ionViewDidEnter() {
      this.contentLoaded.next();
}
ionViewDidLoad() {
      this.loadAndScroll = Observable.merge(
         this.container.ionScroll,
         this.contentLoaded
      );
}

(in the template : [scrollObservable]="loadAndScroll" )

मैंने बस आयनिक के ऊपर पोस्ट किए गए समाधानों को ट्रांसपोंड किया। और कुछ नहीं :)

क्षमा करें, लेकिन मुझे एक समस्या है।
this.contentLoaded.next ();
काम नहीं कर
स्क्रॉल करने पर ही यह ठीक काम करता है
???

हाय @ ज़ारिनारा ,
जब आप not working , तो क्या आपको कोई त्रुटि मिलती है?

नमस्ते
कोई त्रुटि नहीं होती है

@ ज़रीनरा , क्या आप एक नया मुद्दा बना सकते हैं और कुछ कोड उदाहरण और ng-lazyload-image ( npm ls ng-lazyload-image ) का संस्करण संख्या शामिल कर सकते हैं। क्या आपके लिए intersectionObserver का उपयोग करना संभव है?