1window.addEventListener("load", function (event) { 2 // lazy loads elements with default selector as '.lozad' 3 const svgObserver = lozad('.lazy-svg-injection-combo', { 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 (displayValue === "") { 32 svg.style.removeProperty("display"); 33 } else { 34 svg.style.setProperty("display", displayValue, displayPriority); 35 } 36 }, 37 } 38 ) 39 }, 40 loaded: function (el) { 41 // Custom implementation on a loaded element 42 el.classList.add('loaded-combo'); 43 } 44 }); 45 svgObserver.observe(); 46}); 47
