LazyLoader - Support.intersectionObserver

Hi,
I have implemented LazyLoading inside the “Messages Modules” to not having download of all previous image when I load the chat datas.

It perfectly work in CHROME.

When I test on Safari, I see, reading the source code, that “Support.intersectionObserver” return false. Logical because Safari 12 don’t handle it. In the future 12.1 will.

My question is : how do you manage this case ? How in your code you “degrade” cleanly when Support.intersectionObserver is not supported.

Testing it and reading the Lazy code source, make me say that images are not loaded when I scroll. I may think all picture would be downloaded at load, but no.

Can you help me ?

Thanks

Do you use it load only images? Have you tried to use build-in lazy functionality? Without intersection observer, you need to manually check every image position on every scroll and resize, which is not a simple way of doing it

The “imageIsLoading = false” affectation, in the function onImageComplete(lazyEl), is not impacting the same imageIsLoading variable that is used in the function lazyHandler(), at this line : if (app.params.lazy.sequential && imageIsLoading) {

Because, after a first image is loaded, if I scroll up to another images, the imageIsLoading is always set to the « true » affectation that was made before the onImageComplete is called.

So to resume :

Lazy Image at the bottom of the Chat : image is « detected », loaded et isImageLoading is set to false in your « onImageComplete »

If I scroll up to another lazy images, they are detected, but with « imageIsLoading = true » so they are pushed in the array image to load, but never load because of the way the lazyHandler is coded.** (return prevent trigger loadImage)

So I think there is a scope problem with the « imageIsLoading » variable when the onImageComplete is called.

I am sure of that because, if I set imageIsLoading = « HelloYou » on the LazyHandler function, I get « HelloYou » in the next LazyHandler called, despite the fact the onImageComplete was triggered with a line that should have set imageIsLoading = false

function lazyHandler() {
app.lazy.load($pageEl, (lazyEl) => {
if (app.params.lazy.sequential && imageIsLoading) {
if (imagesSequence.indexOf(lazyEl) < 0) imagesSequence.push(lazyEl);
return;
}
imageIsLoading = ‘HelloYou’ . <= (1) setting to’HelloYou’ to track the bug
app.lazy.loadImage(lazyEl, onImageComplete);
});
}

function onImageComplete(lazyEl) {
if (imagesSequence.indexOf(lazyEl) >= 0) {
imagesSequence.splice(imagesSequence.indexOf(lazyEl), 1);
}
imageIsLoading = false; <= (2) onImageComplete, setting to false
if (app.params.lazy.sequential && imagesSequence.length > 0) {
imageIsLoading = true;
app.lazy.loadImage(imagesSequence[0], onImageComplete);
}
}

Scrolling to reach anothers image…

function lazyHandler() {
app.lazy.load($pageEl, (lazyEl) => {
if (app.params.lazy.sequential && imageIsLoading) { <= (3) imageIsLoading Always set to "HelloYou"
if (imagesSequence.indexOf(lazyEl) < 0) imagesSequence.push(lazyEl);
return;
}
imageIsLoading = ‘HelloYou’;
app.lazy.loadImage(lazyEl, onImageComplete);
});
}

Can you setup a minimal reproduction JSFiddle with the issue so I can check it?

Yes sorry. It’s too much complex like that.

I think however that the problem is coming from two call to “create.lazy”, that could explain the “scope” problem.

I will update here when I finish my test.

Thanks

1 Like