Check out this example to see the issue I'm facing.
I've implemented an intersection observer for lazy loading images, here's the code:
const pictures = document.querySelectorAll("[data-src]");
function loadPicture(pic){
const src = pic.getAttribute("data-src");
if (!src) { return; }
pic.src= src;
}
const picOptions = {
threshold: 0,
rootMargin: "0px 0px 300px 0px"
};
const picObserver = new IntersectionObserver( (entries, picObserver) => {
entries.forEach(entry => {
if(!entry.isIntersecting){
return;
} else {
loadPicture(entry.target);
picObserver.unobserve(entry.target);
}
})
}, picOptions);
pictures.forEach( picture => {
picObserver.observe(picture);
});
The issue occurs when I cycle through the Siema carousel - the first and last images seem to "unload", reverting back from `src` to `data-src`, even though they were supposed to be ignored after being observed.
If you click 'prev' in the example, you'll notice the first image disappearing, although it was already loaded.
Why is this happening and how can I fix it?
Update: Fixed fiddle now available at this link, all thanks to @ohladkov