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 ، آسف لكني لا أفهم. حاولت استخدام مترجم جوجل لكنني لم أفهم سؤالك: / هل من الممكن أن تكتب بالإنجليزية؟

في 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" )

لقد قمت للتو بتحويل الحلول المنشورة أعلاه إلى أيوني. لا شيء آخر :)

في Angular 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 حيث قال el-Davo أن هذا يعمل على حل المشكلة في Angular 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 () ؛
لا يعمل
إنه يعمل بشكل جيد فقط عند التمرير
؟؟؟

مرحبًا zarinara ،
عندما تقول not working ، هل تحصل على أي أخطاء؟

أهلا
لا توجد أخطاء

zarinara ، هل يمكنك إنشاء إصدار جديد وتضمين بعض أمثلة التعليمات البرمجية ورقم الإصدار ng-lazyload-image ( npm ls ng-lazyload-image ). هل من الممكن أن تستخدم intersectionObserver ؟