Ng-lazyload-image: फ़ीचर अनुरोध: देखने योग्य निर्माण में छवि तक पहुँच प्राप्त करें

प्रेरणा और कार्यान्वयन

अभी एक अवलोकन योग्य पास करना संभव है जो पुस्तकालय का विस्तार करने का एक शानदार तरीका है। हालाँकि, यह थोड़ा सीमित है क्योंकि उपयोगों को सरल तरीके से छवि तक पहुँच नहीं मिल सकती है।

सबसे आम मुद्दों में से एक यह है कि जब उपयोगकर्ता स्क्रॉल करने के लिए विंडो का उपयोग नहीं करता है या 3-भाग पुस्तकालय का उपयोग नहीं करता है जो अतिरिक्त स्क्रॉल परतें जोड़ता है (उदाहरण के लिए आयनिक, एनजी सामग्री डिज़ाइन, आदि), और कभी-कभी इसे ढूंढना मुश्किल हो सकता है कौन सा तत्व वास्तव में स्क्रॉल करता है। इसे हल करने का एक तरीका Intersection Observer का उपयोग करना हो सकता है (जो प्रदर्शन को बढ़ावा भी दे सकता है)। उदा.

@Component({
  selector: 'intersection-observer',
  template: `<img #img [defaultImage]="defaultImage" [lazyLoad]="image" [scrollObservable]="subject">`,
})
export class IntersectionObserverComponent {
  @ViewChild('img') img;
  subject = new Subject();
  defaultImage = 'https://www.placecage.com/1000/1000';
  image = 'https://images.unsplash.com/photo-1467932760935-519284fc87fa?dpr=2&auto=compress,format&fit=crop&w=1199&h=800&q=80';

  ngAfterViewInit() {
    const config = {
      rootMargin: '50px 50px',
      threshold: 0.01
    };

    function onIntersection(entries) {
      entries.forEach(entry => {
        if (entry.intersectionRatio > 0) {
          observer.unobserve(entry.target);
          this.subject.next();
        }
      });
    }
    const observer = new IntersectionObserver(onIntersection, config);
    observer.observe(this.img.nativeElement);
  }
}

हालांकि यह काफी बोझिल है।

हम एक फ़ंक्शन को scrollObservable रूप में स्वीकार करने के लिए क्या कर सकते हैं, कुछ ऐसा:

if (!this.scrollObservable) {
  const windowTarget = isWindowDefined() ? window : undefined;
  scrollObservable = getScrollListener(this.scrollTarget || windowTarget);
} else if (typeof this.scrollObservable === 'function') {
  scrollObservable = this.scrollObservable(image, offset) // and maybe more
} else {
  scrollObservable = this.scrollObservable.startWith('');
}

हम उपरोक्त घटक को फिर से नहीं लिख सकते हैं:

@Component({
  selector: 'intersection-observer',
  template: `<img [defaultImage]="defaultImage" [lazyLoad]="image"
 [scrollObservable]="startLazyload" offest="50">`,
})
export class IntersectionObserverComponent {
  defaultImage = 'https://www.placecage.com/1000/1000';
  image = 'https://images.unsplash.com/photo-1467932760935-519284fc87fa?dpr=2&auto=compress,format&fit=crop&w=1199&h=800&q=80';

  startLazyload(image, offset) {
    Observable.create(observer => {
      const intersectionObserver = new IntersectionObserver(entries => {
        entries.forEach(entry => {
          if (entry.intersectionRatio > 0) {
            observer.next();
          }
        });
      }, {
        rootMargin: offset ? `${offset}px` : undefined,
        threshold: 0.01
      });
      intersectionObserver.observe(image);
      return () => observer.unobserve(image);
    });
  }
}

बेहतर लेकिन फिर भी थोड़ा शोर, खासकर जब उपयोगकर्ता सभी छवियों पर IntersectionObserver का उपयोग करना चाहता है।

इसे हल करने का एक तरीका NgModule में एक डिफ़ॉल्ट अवलोकन योग्य भी हो सकता है:

import { intersectionObserverLazyLoad } from 'some-place';

@NgModule({
    declarations: [ AppComponent ],
    imports: [ BrowserModule, lazyLoadImage({
      observable: intersectionObserverLazyLoad
    })],
    bootstrap: [ AppComponent ]
})
export class MyAppModule {}

हम उपरोक्त घटक को फिर से नहीं लिख सकते हैं:

@Component({
  selector: 'intersection-observer',
  template: `<img [defaultImage]="defaultImage" [lazyLoad]="image" offest="50">`,
})
export class IntersectionObserverComponent {
  defaultImage = 'https://www.placecage.com/1000/1000';
  image = 'https://images.unsplash.com/photo-1467932760935-519284fc87fa?dpr=2&auto=compress,format&fit=crop&w=1199&h=800&q=80';
}

NgModule में डिफ़ॉल्ट फ़ंक्शंस पास करने की क्षमता isVisible और loadImage लिए कस्टम फ़ंक्शंस बनाने के लिए दरवाजे भी खोल सकती है लेकिन यह बाद की कहानी है।

हल करेंगे: #287, #195, #286, #285, #275, #259 और अधिक। अधिकांश मुद्दों को अन्य तरीकों से हल किया जाता है, लेकिन यह अच्छा होगा यदि हम उपयोगकर्ता को अवलोकन योग्य बनाते समय अधिक लचीलापन दे सकें।

आपको क्या लगता है @sapierens , @rimlin ?