lazyImages | 基于ES6的轻量级，高性能，简便的图片懒加载

I don't know how to mark a comment as answer. Anyways, the suggestion in @user4642212's comment to use document.body instead of just document, works.

Try document.documentElement or document.body instead of document

This may be related to document being an HTMLDocument, but the other two being HTMLElements each. Their prototype chains diverge after Node. Perhaps Safari can’t handle HTMLDocuments being roots in IntersectionObservers.

Further reading provided by @SurajRao: IntersectionObserver not working in Safari or iOS

The async keyword is the problem. I guess you are using a Node.js version before version 7.6.

You can ether use a transpiler (like Babel), use the .then syntax of Promises or upgrade your Node.js version.

Here is a solution that works decently well using jQuery animation: https://jsfiddle.net/ea7fxrL5/

There are two problems in your current code as far as I can tell:

1. The fadeIn function is actually being called before the image's source is changed to the "TN_december-happy-holidays_2.jpg" image because the load event is triggered immediately on intersection, since the image's "christmas-tree" src has already been loaded.

2. The image is already at full opacity, so it needs to be hidden before you can fade it in.

Hope this helps!

It's not supported, https://caniuse.com/#feat=queryselector

You can use alternatives like findElementById or findElementByClassName

With attachEvent you need to add on + name of the event, so the event will be called onload

UPDATE

Also the second parameter of both of the event listeners, are callbacks, so they get executed when the event is triggered. To be able to achieve that, you need to remove the parenthesis of the function call.

I usually use in-view for this sort of things whenever I cannot use observers, but you said that you've been asked not to use any external library or plugin, so I've written you this code in vanilla javascript. This code will run on IE9=< without polyfills.

Note: Please take into account that I did not make any optimizations of performance, for example, say in case all images have been loaded remove event listener and such.