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