Vanilla-lazyload: Intersection Observer not working in Internet Explorer 11

[zmrhaljiri]

Describe the bug
When opening a page in Internet Explorer 11 with the Intersection Observer polyfill + lazyload libraries included, all lazy images (including background) are loaded at once on page load.

To Reproduce
Steps to reproduce the behavior:

_Example 1: Normal images_

1. Open Internet Explorer 11
2. Go to the official demo page with the Intersection Observer example
3. Open the Network tab
4. Refresh the page
5. You can see all images are loaded at once

_Example 2: Background images_

1. Open Internet Explorer 11
2. Go to the example page I prepared, notice the Intersection Observer polyfill is included before the lazyload library
3. Open the Network tab
4. Refresh the page
5. You can see all images are loaded at once

Expected behavior
Images are loaded only when they enter a viewport.

LazyLoad version

• Version 12.1.0

Desktop (please complete the following information):

• OS: Windows
• Browser Internet Explorer
• Version 11

[verlok]

Hi @zmrhaljiri,
thank you for taking the time to open this issue.

It’s not a bug, it’s designed to work like this. If the browser doesn’t support IntersectionObserver, it loads all the images to make users see the images anyway.

If you require the same exact behaviour also in IE11, you should load a polyfill before loading LazyLoad. Find out how in the documentation (README file).

Before doing that, please consider that IE11 is not maintained anymore, and analyse how many users of your website browse it with IE11.

[zmrhaljiri]

Hello @verlok,
thanks for the reply.

You are right, if the browser doesn't support Intersection Observer, then all the images are loaded. But if I understand it correctly, if the polyfill is loaded before LazyLoad is loaded, then it should work fine. Is that correct?

On the example page, you can see that the Intersection Observer polyfill is loaded before LazyLoad, so it should not load all the images at once, am I right or missing something here, please?

(Using IE11 is not my decision, I just have to :))

[oncode]

Hi @verlok @zmrhaljiri
I just noticed the same issue. The problem is with the new way of checking if IntersectionObserver is supported added 17 days ago with this commit: https://github.com/verlok/lazyload/commit/1023235a22d1c3270d7fd144608add3c2bdc041c

The last two tests are failing when using the w3c intersection-oberserver:

"intersectionRatio" in window.IntersectionObserverEntry.prototype;
"isIntersecting" in window.IntersectionObserverEntry.prototype;

For a quick solution I downgraded from version 12.1.0 to 12.0.1 with:

npm install [email protected] --save --save-exact

When I import the library I also need to use import LazyLoad from 'vanilla-lazyload/dist/lazyload' (full path to dist) or else it won't work.

[verlok]

Thanks for pointing this out.
I had a feeling that changing the way we detect IntersectionObserver it could break something.
I can roll it back eventually.
But why is the W3C IntersectionObserver polyfill missing those properties?

[verlok]

Could you please tell me which version of the intersection observer polyfill you are using?

[oncode]

@verlok Sure, I'm using the latest one 0.7.0. They seem to assign those properties in the constructor of IntersectionObserverEntry, not via prototype, that's why the lookup in the prototype is failing.

https://github.com/w3c/IntersectionObserver/blob/master/polyfill/intersection-observer.js#L64
https://github.com/w3c/IntersectionObserver/blob/master/polyfill/intersection-observer.js#L79

[verlok]

Solved with 12.1.1

[zmrhaljiri]

Many thanks :)