1window.addEventListener("load", function () {
2    // lazy loads elements with default selector as '.lozad'
3    const svgObserver = lozad('.lazy-svg-injection-cs', {
4        load: function (el) {
5            // SvgInjector leaves a src blank
6            // creating a broken image
7            // we cache the image and display it again after
8            let displayValue = el.style.getPropertyValue('display');
9            let displayPriority = el.style.getPropertyPriority('display');
10            // important is important because other css styling rule may also use it
11            el.style.setProperty('display', 'none', 'important');
12            // SVGInjector takes over and load the svg element
13            // in place of lozad
14            SVGInjector(el, {
15                    each: function (svg) {
16                        // Style copy (max width)
17                        // If any error, svg is a string with the error
18                        // Example: `Unable to load SVG file: http://doku/_media/ui/preserveaspectratio.svg`
19                        if (typeof svg === 'object') {
20                            if (el.hasOwnProperty("style")) {
21                                svg.style.cssText = el.style.cssText;
22                            }
23                            if (el.hasOwnProperty("dataset")) {
24                                let dataSet = el.dataset;
25                                if (dataSet.hasOwnProperty("class")) {
26                                    dataSet.class.split(" ").forEach(e => svg.classList.add(e));
27                                }
28                            }
29
30                            // remove the none display or set the old value back
31                            if(svg.style !== 'undefined' ) {
32                                if (displayValue === "") {
33                                    svg.style.removeProperty("display");
34                                } else {
35                                    svg.style.setProperty("display", displayValue, displayPriority);
36                                }
37                            }
38                        }
39
40                    },
41                }
42            )
43        },
44        loaded: function (el) {
45            // Custom implementation on a loaded element
46            el.classList.add('loaded-cs');
47        }
48    });
49    svgObserver.observe();
50});
51