Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

how to detect browser support for IntersectionObserver to avoid load #296

Closed
puppetmaster3 opened this issue Apr 27, 2018 · 7 comments
Closed

Comments

@puppetmaster3
Copy link

How can I check if ( ! IntersectionObserver ) in javascript to see if browser supports it?

So I only load if not supported.

@midzer
Copy link
Contributor

midzer commented Apr 27, 2018

You can try something like

if (!'IntersectionObserver' in window &&
    !'IntersectionObserverEntry' in window &&
    !'intersectionRatio' in window.IntersectionObserverEntry.prototype) {
    // load polyfill now
}

@nickion
Copy link

nickion commented Jan 4, 2019

if (!'IntersectionObserver' in window &&
!'IntersectionObserverEntry' in window &&
!'intersectionRatio' in window.IntersectionObserverEntry.prototype) {

Easy mistake to make, but because the intent is to fallback should any prerequisite not be satisfied || should be used rather than &&, i.e. if we don't have this or we don't have that...),. Alternatively, use && with positive tests and negate the entire expression (we need this and that, and if we don't have all of them...).

@doughballs
Copy link

doughballs commented Jan 7, 2019

@midzer tested in Safari, doesn't work unfortunately. I put a simple console.log inside the brackets and it is not triggered.

@nickion using || generates the following error on line 3:

TypeError: undefined is not an object (evaluating 'window.IntersectionObserverEntry.prototype')

I got this to work in Safari with the following:

if ('IntersectionObserver' in window) {
    // LazyLoad images using IntersectionObserver
}  else {
    // Load all images at once
}

@nickion
Copy link

nickion commented Jan 8, 2019

@nickion using || generates the following error on line 3:

TypeError: undefined is not an object (evaluating 'window.IntersectionObserverEntry.prototype')

that's the error you would expect to get when using && because the original logic was saying, "if A doesn't exist and B doesn't exist, does this property in B exist?", Well No!, it can't exist because we've already shown that B doesn't exist, so how could it.

However, there's another issue which is that ! binds tighter than in, such that both 'blat' in window and !'blat' in window evaluate as false. So it should read:

if (!('IntersectionObserver' in window) ||
    !('IntersectionObserverEntry' in window) ||
    !('intersectionRatio' in window.IntersectionObserverEntry.prototype)) {
    // load polyfill now
}

@joselanderosmrf
Copy link

FYI, on some versions of Chrome, Opera and Edge IntersectionObservers are partially implemented so the check 'isIntersecting' in window.IntersectionObserverEntry.prototype is also necessary to check for full support.

@Sebiworld
Copy link

@joselanderosmrf Or you use entry.intersectionRatio > 0 to detect if an element is visible instead of entry.isIntersecting. As far as I know it only should bother IE Edge.

@lucidlive
Copy link

Just use the polyfill:

<script src='https://cdn.polyfill.io/v2/polyfill.js?features=IntersectionObserver'></script>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

8 participants