load images that appear on viewport

[AzerHeshim]

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

[tjoskar]

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?

[ziuniecki]

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>

[tjoskar]

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.

1. Using IntersectionObserver (recommended way)
   Just add intersectionObserverPreset in your module:

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

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

2. Use visible instead of hidden. If the image still has its position if it is not visible.
3. Create your own scrollObservable that merge scroll events and the event that change activeRecipeIndex (in your case). I can help you with this if you want.

[AzerHeshim]

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?

[ziuniecki]

Thanks @tjoskar it works :) I choose first option :)