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