Offset doesn't work

[drdreo]

I wanted to improve appearance of the images via setting an offset to load the image beforehand. But it still does trigger the request when the image is already in the viewport.

Setting it like:

<img defaultImage="https://via.placeholder.com/400x800"
                 [offset]="300"
                 lazyLoad="../../assets/images/phones/phone@3x.png"/>

[tjoskar]

Hi @drdreo, I can not reproduce the error. I have created an app here: https://angular-8-lazyload-image-issue-402.stackblitz.io/

Open up dev tools and reload the page. You should see that the default image is loaded (https://www.placecage.com/1000/1000) but not the lazyloaded image (https://images.unsplash.com/photo-1443890923422-7819ed4101c0?fm=jpg). Scroll down to you see the red box and you should see that the lazyloaded image is loaded, 300px before it is in the viewport.

[tjoskar]

Source code for the app: https://stackblitz.com/edit/angular-8-lazyload-image-issue-402?file=src%2Fapp%2Fapp.component.html

[drdreo]

Thanks for taking the time. I get the exact same behaviour as in my project. It only is loaded when the image is seen. Tested on Windows 10 in Chrome 76.0.3809.100 (normal and private session), Edge, Firefox 68.0.2

And to be sure it was not my PC, on my MacBook on Chrome and Safari the exact same result.

[drdreo]

[tjoskar]

Interesting, I can not reproduce the error in Chrome, Brave, Firefox or Safari on MacOS and I also tried Chrome (76.0.3809.87) and firefox (68) on Windows 10 with browserstack without the issue.

Can you try to check the box "disable cache" to see if you get the same behavior?

[drdreo]

Disabled the cache. Even tried all browsers again at my work PC. Unfortunately, same results.

[drdreo]

I have fiddled around with the IntersectionObserver, and key is the root option. If it is undefined, it ignores the margin. Here an example: https://jsfiddle.net/mz26j7kf/ Removing the root: document.querySelector(".container"), there will result in the images only being loaded when in the viewport. When the root is set, it works properly. After some investigations it might be a problem that the root is only set if isWindowDefined . Since i am serving it with SSR and the app might upgrade later than the check.

[tjoskar]

@drdreo, thanks for investigating this.

Since i am serving it with SSR and the app might upgrade later than the check.

You might be up to something but SSR should only decide what default image should be used. After the page has been loaded, ng-lazyload-image should kick in and load the images, in the same way, it should have been done if SSR has disabled.

I need to investigate this further.

[tjoskar]

Is it possible for you to update and try version 7.0.0?

[drdreo]

I tested it yesterday on stackblitz with version 7.0.0 and was like: "nice it works, i can add it to the project." Today, i built it in and tested it, offset works but only scrolling down not scrolling sideways. Then i went back to stackblitz to test horizontal, and it didn't working at all there. This gets weirder to debug now. I guess i stick to scrollObservers until i know what causes this behavior. The modified version with horizontal and v7: https://stackblitz.com/edit/angular-8-lazyload-image-issue-402-pjhnel

[tjoskar]

Hi @drdreo, I know it was a while ago but I was looking at this issue again. I can reproduce the issue in your stackblitz but I can not reproduce it on my local environment. I created a copy of your view here: https://naughty-bose-ec1cfc.netlify.com/offset

[tjoskar]

Is this still an issue for you?

[drdreo]

Yes it was. I switched to Scrolling from Observers so i don't be stuck on my project. So i haven't investigated further.

[arangelp]

I have the same issue.

[Schwankenson]

Same here: I`m using Ionic 5, and setting lazyLoadOffset value has no impact.

I can`t pass ion-content, because the lazy loading is used in an own component, which is inserted below ion-content. I would have to pass it through a service, or thogh multiple levels down to the component.

Any solution for this?

[Schwankenson]

Ok, i found the problem in my case: I had to set scrollTarget.

I used the function getScrollElement() for my Ionic ion-content to get it