diff --git a/package.json b/package.json index 8f42635adc..8de04b3628 100644 --- a/package.json +++ b/package.json @@ -99,7 +99,8 @@ "src/scripts/settings/webSettings.js", "src/scripts/dfnshelper.js", "src/scripts/imagehelper.js", - "src/scripts/inputManager.js" + "src/scripts/inputManager.js", + "src/components/lazyloader/lazyloader-intersectionobserver.js" ], "plugins": [ "@babel/plugin-transform-modules-amd" diff --git a/src/components/images/imageLoader.js b/src/components/images/imageLoader.js index 8e2bcedf82..37b9226f6a 100644 --- a/src/components/images/imageLoader.js +++ b/src/components/images/imageLoader.js @@ -36,7 +36,6 @@ define(['lazyLoader', 'imageFetcher', 'layoutManager', 'browser', 'appSettings', } function lazyChildren(elem) { - lazyLoader.lazyChildren(elem, fillImage); } diff --git a/src/components/lazyloader/lazyedgehack.css b/src/components/lazyloader/lazyedgehack.css deleted file mode 100644 index e358872f16..0000000000 --- a/src/components/lazyloader/lazyedgehack.css +++ /dev/null @@ -1,5 +0,0 @@ -.lazy { - /* In edge, intersection observer will not fire on 0px sized elements */ - min-width: 0.1em; - min-height: 0.1em; -} diff --git a/src/components/lazyloader/lazyloader-intersectionobserver.js b/src/components/lazyloader/lazyloader-intersectionobserver.js index 377e3d0cff..222192f244 100644 --- a/src/components/lazyloader/lazyloader-intersectionobserver.js +++ b/src/components/lazyloader/lazyloader-intersectionobserver.js @@ -1,76 +1,71 @@ -define(['require', 'browser'], function (require, browser) { - 'use strict'; +import require from 'require'; +import browser from 'browser'; +/* eslint-disable indent */ - function LazyLoader(options) { + export class LazyLoader { + constructor(options) { + this.options = options; + this.observer; + } - this.options = options; - } + createObserver() { + const callback = this.options.callback; - if (browser.edge) { - require(['css!./lazyedgehack']); - } + const observer = new IntersectionObserver( + (entries, observer) => { + entries.forEach(entry => { + callback(entry); + }, + {rootMargin: "50%"}); + }); - LazyLoader.prototype.createObserver = function () { - var callback = this.options.callback; + this.observer = observer; + } - var observer = new IntersectionObserver( - (entries, observer) => { - entries.forEach(entry => { - callback(entry); - }, - {rootMargin: "50%"}); + addElements(elements) { + let observer = this.observer; + + if (!observer) { + this.createObserver(); + observer = this.observer; + } + + Array.from(elements).forEach(element => { + observer.observe(element); }); - - this.observer = observer; - }; - - LazyLoader.prototype.addElements = function (elements) { - - var observer = this.observer; - - if (!observer) { - this.createObserver(); - observer = this.observer; } - this.elementCount = (this.elementCount || 0) + elements.length; + destroyObserver(elements) { + const observer = this.observer; - for (var i = 0, length = elements.length; i < length; i++) { - observer.observe(elements[i]); + if (observer) { + observer.disconnect(); + this.observer = null; + } } - }; - LazyLoader.prototype.destroyObserver = function (elements) { - - var observer = this.observer; - - if (observer) { - observer.disconnect(); - this.observer = null; + destroy(elements) { + this.destroyObserver(); + this.options = null; } - }; - - LazyLoader.prototype.destroy = function (elements) { - - this.destroyObserver(); - this.options = null; - }; + } function unveilElements(elements, root, callback) { - if (!elements.length) { return; } - var lazyLoader = new LazyLoader({ + const lazyLoader = new LazyLoader({ callback: callback }); lazyLoader.addElements(elements); } - LazyLoader.lazyChildren = function (elem, callback) { - + export function lazyChildren(elem, callback) { unveilElements(elem.getElementsByClassName('lazy'), elem, callback); - }; + } - return LazyLoader; -}); +/* eslint-enable indent */ +export default { + LazyLoader: LazyLoader, + lazyChildren: lazyChildren +};