when page loaded, the default images doesnt change to lazyload ones on viewport, only when scroll starts the images are appearing, how can i handle the images that are on the viewport? thanks
That sound weird. What version of ng-lazyload-image
are you using? What browser are you using? Is this the same behavior in other browsers (firefox/chrome/safari/edige/ios/android)? Are you sure the image is not loaded until you start scrolling?
Is it possible to create a small repo to reproduce the error? Or record a gif/video?
I have the same issue on Chrome, Firefox and Edge. I'm using [hidden] (true by default) on component that have lazy loaded images.
When hidden changing to false, Component is rendering but image is default (loader), only scroll make images appering.
My img tag in component:
<img [lazyLoad]="recipe.image"
[offset]="100"
src="ng-assets/animations/recipe-loader.gif">
And my component:
<app-recipe *ngFor="let recipe of recipes; let i = index;"
[hidden]="activeRecipeIndex !== i"
[recipe]="recipe">
</app-recipe>
Hi @zieka,
The problem is that the image is hidden when ng-lazyload-image
kicks in and will therefor threat the image as outside the viewport (the image has no position, sine it not rendered and there is no way to know when it becomes visible, and revalidate if it's in the viewport).
There is however three ways of solving this.
intersectionObserverPreset
in your module:import { LazyLoadImageModule, intersectionObserverPreset } from 'ng-lazyload-image';
...
LazyLoadImageModule.forRoot({
preset: intersectionObserverPreset
})
...
scrollObservable
that merge scroll events and the event that change activeRecipeIndex
(in your case). I can help you with this if you want.hello, @tjoskar i kind of solved this problem by using [offset]=800
, but i'm not sure if it's the most appropiate way of fixing it, what do you think?
Thanks @tjoskar it works :) I choose first option :)
Most helpful comment
Hi @zieka,
The problem is that the image is hidden when
ng-lazyload-image
kicks in and will therefor threat the image as outside the viewport (the image has no position, sine it not rendered and there is no way to know when it becomes visible, and revalidate if it's in the viewport).There is however three ways of solving this.
Just add
intersectionObserverPreset
in your module:scrollObservable
that merge scroll events and the event that changeactiveRecipeIndex
(in your case). I can help you with this if you want.