17 replies

IntersectionObserver Question

Hello,

I'm trying to use IntersectionObserver for two different instances. First, to detect when a section is within view, then count from 0 to 500. Then, to detect if any img is in view, and to animate them appearing.

Current Snippet:

const counter = document.querySelector('.value');

const imgs = document.querySelectorAll('img'); // Get images

const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
        if(entry.isIntersecting) {
            countReviews()
            console.log(entry)
        };
    });
});

observer.observe(counter);

observer.observe(imgs); // Call Observer for images

const counter = document.querySelector('.value');

const imgs = document.querySelectorAll('img'); // Get images

const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
        if(entry.isIntersecting) {
            countReviews()
            console.log(entry)
        };
    });
});

observer.observe(counter);

observer.observe(imgs); // Call Observer for images

This code works for counting, but I'm unsure how to incorporate a second observer. Do I need to check when theres an observation and determine if it's the counter or image by the observation target, then call each function accordingly? (didn't include the lazy load function)

Any help is appreciated, thanks

KP-C

Kevin Powell - Community•3y ago•

17 replies

Matt

IntersectionObserver Question

const counter = document.querySelector('.value');

const imgs = document.querySelectorAll('img'); // Get images

const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
        if(entry.isIntersecting) {
            countReviews()
            console.log(entry)
        };
    });
});

observer.observe(counter);

observer.observe(imgs); // Call Observer for images

const counter = document.querySelector('.value');

const imgs = document.querySelectorAll('img'); // Get images

const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
        if(entry.isIntersecting) {
            countReviews()
            console.log(entry)
        };
    });
});

observer.observe(counter);

observer.observe(imgs); // Call Observer for images

IntersectionObserver Question

Similar Threads

IntersectionObserver Question

Similar Threads

Similar Threads

Similar Threads