Ng-lazyload-image: تحميل الصور التي تظهر في منفذ العرض

هذا الصوت غريب. ما هو إصدار ng-lazyload-image الذي تستخدمه؟ ما المتصفح الذي تستخدمه؟ هل هذا هو نفس السلوك في المتصفحات الأخرى (Firefox / chrome / safari / edige / ios / android)؟ هل أنت متأكد من عدم تحميل الصورة حتى تبدأ في التمرير؟
هل من الممكن إنشاء ريبو صغير لإعادة إنتاج الخطأ؟ أو تسجيل gif / الفيديو؟

لدي نفس المشكلة على Chrome و Firefox و Edge. أنا أستخدم [مخفي] (صحيح افتراضيًا) على المكون الذي يحتوي على صور محملة ببطء.
عند التغيير المخفي إلى خطأ ، يتم عرض المكون ولكن الصورة افتراضية (أداة التحميل) ، فقط التمرير يجعل الصور تظهر.

علامة img الخاصة بي في المكون:

<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>

مرحبًا zieka ،

تكمن المشكلة في أن الصورة تكون مخفية عندما يبدأ ng-lazyload-image في الظهور ، وبالتالي ستهدد الصورة على أنها خارج إطار العرض (الصورة ليس لها موضع ، شرط أن لا يتم عرضها ولا توجد طريقة لمعرفة متى تصبح مرئية ، وإعادة التحقق إذا كان في منفذ العرض).

ومع ذلك ، هناك ثلاث طرق لحل هذا.

1. باستخدام IntersectionObserver (الطريقة الموصى بها)
   فقط أضف intersectionObserverPreset في الوحدة النمطية الخاصة بك:

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

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

1. استخدم المرئي بدلاً من المخفي. إذا كانت الصورة لا تزال في موضعها إذا لم تكن مرئية.
2. قم بإنشاء scrollObservable الخاص بك والذي يدمج أحداث التمرير والحدث الذي يتغير activeRecipeIndex (في حالتك). يمكنني مساعدتك في هذا إذا كنت تريد.

مرحبًا ، لقد نجحتtjoskar في حل هذه المشكلة باستخدام [offset]=800 ، لكنني لست متأكدًا مما إذا كانت هذه هي الطريقة الأكثر ملاءمة لإصلاحها ، فما رأيك؟

شكرا tjoskar يعمل :) اخترت الخيار الأول :)