Load all images when intersection observer is not supported

Question

I'm using intersection observer for late loading images. How can I load all images in browsers that don't support intersection observer?

My script=

const imob = new IntersectionObserver((entries, self) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            llo(entry.target);
            self.unobserve(entry.target);
        }
    });
});
document.querySelectorAll('.lzyp').forEach((pcu) => {
    imob.observe(pcu);
});

const llo = (pcu) => {
    const img = pcu.querySelector('img');
    const sce = pcu.querySelectorAll('source');

    sce.forEach((sue) => {
        sue.srcset = sue.dataset.srcset;
        sue.removeAttribute('data-srcset');
    });
    img.src = img.dataset.src;
    img.removeAttribute('data-src');
}

you can simply use load event for all your images – Mister Jojo Jan 15 '22 at 15:00 — Mister Jojo, Jan 15 '22 at 15:00

Leyiang · Accepted Answer · 2022-01-15T16:42:12.723

1

Maybe a polyfill for IntersectionObserver?
Adding fallback code if IntersectionObserver is not supported.

if (!('IntersectionObserver' in window) ||
    !('IntersectionObserverEntry' in window) ||
    !('intersectionRatio' in window.IntersectionObserverEntry.prototype) ||
    !('isIntersecting' in window.IntersectionObserverEntry.prototype)
) {
    // load all images here
    document.querySelectorAll('.lzyp').forEach( llo );
}

Resolve Arrow function is not supported in IE:

// change from this
document.querySelectorAll('.lzyp').forEach((pcu) => {
    imob.observe(pcu);
});

// to this
document.querySelectorAll('.lzyp').forEach( function(pcu) {
    imob.observe(pcu);
});

put together:

function llo(pcu) {
    const img = pcu.querySelector('img');
    const sce = pcu.querySelectorAll('source');

    sce.forEach((sue) => {
        sue.srcset = sue.dataset.srcset;
        sue.removeAttribute('data-srcset');
    });
    img.src = img.dataset.src;
    img.removeAttribute('data-src');
}

// IntersectionObserver is not supported
if (!('IntersectionObserver' in window) ||
    !('IntersectionObserverEntry' in window) ||
    !('intersectionRatio' in window.IntersectionObserverEntry.prototype) ||
    !('isIntersecting' in window.IntersectionObserverEntry.prototype)
) {
    // load all images here
    document.querySelectorAll('.lzyp').forEach( llo );
} else {
    const imob = new IntersectionObserver( function(entries, self) {
        entries.forEach( function(entry) {
            if (entry.isIntersecting) {
                llo(entry.target);
                self.unobserve(entry.target);
            }
        });
    });
    document.querySelectorAll('.lzyp').forEach(function(pcu) {
        imob.observe(pcu);
    });
}

edited Jan 15 '22 at 16:42

answered Jan 15 '22 at 14:53

Leyiang

530
4
7

i tried but it didn't work – awakening Jan 15 '22 at 15:06
Any errors? Try add a `console.log(1)` inside the if statement to check if the condition is truthy, that is, browser doesn't support `IntersectionObserver` – Leyiang Jan 15 '22 at 15:11
Gives syntax error, point of error ( => ) line (1,58) – awakening Jan 15 '22 at 15:18
Is it possible for you to put your code on codesandbox or something for me to debug? – Leyiang Jan 15 '22 at 15:26
(https://stackoverflow.com/questions/44437497/syntax-error-using-in-ie) here it is said that ie does not support arrow functions, how can we solve this – awakening Jan 15 '22 at 15:26
OK, I get it. The error is from your code. I thought error is from the solutions that I provide. So you need to change every arrow function in your code to normal function, you can find an example in my updated answer. – Leyiang Jan 15 '22 at 15:30
it didn't work, 'IntersectionObserver' is undefined , console error – awakening Jan 15 '22 at 16:36
Well, That's because you didn't put IntersectionObserver in the `else statement`, checkout my updated answer – Leyiang Jan 15 '22 at 16:39

Load all images when intersection observer is not supported

1 Answers1