loading-attribute-polyfill - npm Package Compare versions

Comparing version 2.0.0-rc.0 to 2.0.0-rc.1

CHANGELOG.md

@@ -9,2 +9,20 @@ # Changelog
 
+## [2.0.0-rc.1] - 2021-04-03
+
+### Added
+
+- Automated Mozilla Firefox testing via crossbrowsertesting
+- Automated Microsoft Internet Explorer 9 testing via crossbrowsertesting
+
+### Changed
+
+- build(deps-dev): bump husky from 5.1.3 to 6.0.0 (a.o. [!110](https://github.com/mfranzke/loading-attribute-polyfill/pull/110))
+- build(deps-dev): bump html-validate from 4.6.1 to 4.8.0
+- build(deps-dev): bump webdriverio dependencies
+- Optimized the demo pages functionality for dynamic images, by adding a button
+- refactor: replacing `requestAnimationFrame` by `will-change: contents` (CSS)
+- build(deps-dev): bump @commitlint dependencies from 12.0.1 to 12.1.1
+- chore: moved source file to subfolder for better structure
+- some formatting and codacy feedback
+
 ## [2.0.0-rc.0] - 2021-03-22
@@ -11,0 +29,0 @@

dist/loading-attribute-polyfill.js

@@ -1,2 +0,2 @@
-var e,t={rootMargin:"0px 0px 256px 0px",threshold:.01,lazyImage:'img[loading="lazy"]',lazyIframe:'iframe[loading="lazy"]'},r="loading"in HTMLImageElement.prototype,a="loading"in HTMLIFrameElement.prototype,o="onscroll"in window;window.NodeList&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),"IntersectionObserver"in window&&(e=new IntersectionObserver(function(e,t){e.forEach(function(e){if(0!==e.intersectionRatio){var r=e.target;t.unobserve(r),i(r)}})},t));var n="requestAnimationFrame"in window?window.requestAnimationFrame:function(e){e()};function i(e){var t,r,a=[];"picture"===e.parentNode.tagName.toLowerCase()&&((r=(t=e.parentNode).querySelector("source[data-lazy-remove]"))&&t.removeChild(r),a=Array.prototype.slice.call(e.parentNode.querySelectorAll("source"))),a.push(e),a.forEach(function(e){e.hasAttribute("data-lazy-srcset")&&(e.setAttribute("srcset",e.getAttribute("data-lazy-srcset")),e.removeAttribute("data-lazy-srcset"))}),e.setAttribute("src",e.getAttribute("data-lazy-src")),e.removeAttribute("data-lazy-src")}function c(t){var n=document.createElement("div");for(n.innerHTML=function(t){var n=t.textContent||t.innerHTML,i="data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 "+((n.match(/width=['"](\d+)['"]/)||!1)[1]||1)+" "+((n.match(/height=['"](\d+)['"]/)||!1)[1]||1)+"%27%3E%3C/svg%3E";return(/<img/gim.test(n)&&!r||/<iframe/gim.test(n)&&!a)&&o&&(n=void 0===e?n.replace(/(?:\r\n|\r|\n|\t| )src=/g,' lazyload="1" src='):(n=n.replace("<source",'<source srcset="'+i+'" data-lazy-remove="true"></source>\n<source')).replace(/(?:\r\n|\r|\n|\t| )srcset=/g," data-lazy-srcset=").replace(/(?:\r\n|\r|\n|\t| )src=/g,' src="'+i+'" data-lazy-src=')),n}(t);n.firstChild;){var i=n.firstChild;if(o&&void 0!==e&&i.tagName&&(("img"===i.tagName.toLowerCase()||"picture"===i.tagName.toLowerCase())&&!r||"iframe"===i.tagName.toLowerCase()&&!a)){var c="picture"===i.tagName.toLowerCase()?n.querySelector("img"):i;e.observe(c)}t.parentNode.insertBefore(i,t)}t.parentNode.removeChild(t)}var s=function(){document.querySelectorAll("noscript.loading-lazy").forEach(function(e){return c(e)}),void 0!==window.matchMedia&&window.matchMedia("print").addListener(function(e){e.matches&&document.querySelectorAll(t.lazyImage+"[data-lazy-src],"+t.lazyIframe+"[data-lazy-src]").forEach(function(e){i(e)})})};/comp|inter/.test(document.readyState)?n(s):"addEventListener"in document?document.addEventListener("DOMContentLoaded",function(){n(s)}):document.attachEvent("onreadystatechange",function(){"complete"===document.readyState&&s()}),module.exports={prepareElement:c};
+var e,t={rootMargin:"0px 0px 256px 0px",threshold:.01,lazyImage:'img[loading="lazy"]',lazyIframe:'iframe[loading="lazy"]'},r="loading"in HTMLImageElement.prototype,a="loading"in HTMLIFrameElement.prototype,o="onscroll"in window;function n(e){var t,r,a=[];"picture"===e.parentNode.tagName.toLowerCase()&&((r=(t=e.parentNode).querySelector("source[data-lazy-remove]"))&&t.removeChild(r),a=Array.prototype.slice.call(e.parentNode.querySelectorAll("source"))),a.push(e),a.forEach(function(e){e.hasAttribute("data-lazy-srcset")&&(e.setAttribute("srcset",e.getAttribute("data-lazy-srcset")),e.removeAttribute("data-lazy-srcset"))}),e.setAttribute("src",e.getAttribute("data-lazy-src")),e.removeAttribute("data-lazy-src")}function i(t){var n=document.createElement("div");for(n.innerHTML=function(t){var n=t.textContent||t.innerHTML,i="data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 "+((n.match(/width=['"](\d+)['"]/)||!1)[1]||1)+" "+((n.match(/height=['"](\d+)['"]/)||!1)[1]||1)+"%27%3E%3C/svg%3E";return(/<img/gim.test(n)&&!r||/<iframe/gim.test(n)&&!a)&&o&&(n=void 0===e?n.replace(/(?:\r\n|\r|\n|\t| )src=/g,' lazyload="1" src='):(n=n.replace("<source",'<source srcset="'+i+'" data-lazy-remove="true"></source>\n<source')).replace(/(?:\r\n|\r|\n|\t| )srcset=/g," data-lazy-srcset=").replace(/(?:\r\n|\r|\n|\t| )src=/g,' src="'+i+'" data-lazy-src=')),n}(t);n.firstChild;){var i=n.firstChild;if(o&&void 0!==e&&i.tagName&&(("img"===i.tagName.toLowerCase()||"picture"===i.tagName.toLowerCase())&&!r||"iframe"===i.tagName.toLowerCase()&&!a)){var c="picture"===i.tagName.toLowerCase()?n.querySelector("img"):i;e.observe(c)}t.parentNode.insertBefore(i,t)}t.parentNode.removeChild(t)}window.NodeList&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),"IntersectionObserver"in window&&(e=new IntersectionObserver(function(e,t){e.forEach(function(e){if(0!==e.intersectionRatio){var r=e.target;t.unobserve(r),n(r)}})},t));var c=function(){document.querySelectorAll("noscript.loading-lazy").forEach(function(e){return i(e)}),void 0!==window.matchMedia&&window.matchMedia("print").addListener(function(e){e.matches&&document.querySelectorAll(t.lazyImage+"[data-lazy-src],"+t.lazyIframe+"[data-lazy-src]").forEach(function(e){n(e)})})};/comp|inter/.test(document.readyState)?c():"addEventListener"in document?document.addEventListener("DOMContentLoaded",function(){c()}):document.attachEvent("onreadystatechange",function(){"complete"===document.readyState&&c()}),module.exports={prepareElement:i};
 //# sourceMappingURL=loading-attribute-polyfill.js.map

dist/loading-attribute-polyfill.modern.js

@@ -1,2 +0,2 @@
-var e,t={rootMargin:"0px 0px 256px 0px",threshold:.01,lazyImage:'img[loading="lazy"]',lazyIframe:'iframe[loading="lazy"]'},r="loading"in HTMLImageElement.prototype,a="loading"in HTMLIFrameElement.prototype,o="onscroll"in window;window.NodeList&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),"IntersectionObserver"in window&&(e=new IntersectionObserver(function(e,t){e.forEach(function(e){if(0!==e.intersectionRatio){var r=e.target;t.unobserve(r),i(r)}})},t));var n="requestAnimationFrame"in window?window.requestAnimationFrame:function(e){e()};function i(e){var t,r,a=[];"picture"===e.parentNode.tagName.toLowerCase()&&((r=(t=e.parentNode).querySelector("source[data-lazy-remove]"))&&t.removeChild(r),a=Array.prototype.slice.call(e.parentNode.querySelectorAll("source"))),a.push(e),a.forEach(function(e){e.hasAttribute("data-lazy-srcset")&&(e.setAttribute("srcset",e.getAttribute("data-lazy-srcset")),e.removeAttribute("data-lazy-srcset"))}),e.setAttribute("src",e.getAttribute("data-lazy-src")),e.removeAttribute("data-lazy-src")}function c(t){var n=document.createElement("div");for(n.innerHTML=function(t){var n=t.textContent||t.innerHTML,i="data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 "+((n.match(/width=['"](\d+)['"]/)||!1)[1]||1)+" "+((n.match(/height=['"](\d+)['"]/)||!1)[1]||1)+"%27%3E%3C/svg%3E";return(/<img/gim.test(n)&&!r||/<iframe/gim.test(n)&&!a)&&o&&(n=void 0===e?n.replace(/(?:\r\n|\r|\n|\t| )src=/g,' lazyload="1" src='):(n=n.replace("<source",'<source srcset="'+i+'" data-lazy-remove="true"></source>\n<source')).replace(/(?:\r\n|\r|\n|\t| )srcset=/g," data-lazy-srcset=").replace(/(?:\r\n|\r|\n|\t| )src=/g,' src="'+i+'" data-lazy-src=')),n}(t);n.firstChild;){var i=n.firstChild;if(o&&void 0!==e&&i.tagName&&(("img"===i.tagName.toLowerCase()||"picture"===i.tagName.toLowerCase())&&!r||"iframe"===i.tagName.toLowerCase()&&!a)){var c="picture"===i.tagName.toLowerCase()?n.querySelector("img"):i;e.observe(c)}t.parentNode.insertBefore(i,t)}t.parentNode.removeChild(t)}let s=()=>{document.querySelectorAll("noscript.loading-lazy").forEach(e=>c(e)),void 0!==window.matchMedia&&window.matchMedia("print").addListener(function(e){e.matches&&document.querySelectorAll(t.lazyImage+"[data-lazy-src],"+t.lazyIframe+"[data-lazy-src]").forEach(function(e){i(e)})})};/comp|inter/.test(document.readyState)?n(s):"addEventListener"in document?document.addEventListener("DOMContentLoaded",function(){n(s)}):document.attachEvent("onreadystatechange",function(){"complete"===document.readyState&&s()});const d={prepareElement:c};export default d;
+var e,t={rootMargin:"0px 0px 256px 0px",threshold:.01,lazyImage:'img[loading="lazy"]',lazyIframe:'iframe[loading="lazy"]'},r="loading"in HTMLImageElement.prototype,a="loading"in HTMLIFrameElement.prototype,o="onscroll"in window;function n(e){var t,r,a=[];"picture"===e.parentNode.tagName.toLowerCase()&&((r=(t=e.parentNode).querySelector("source[data-lazy-remove]"))&&t.removeChild(r),a=Array.prototype.slice.call(e.parentNode.querySelectorAll("source"))),a.push(e),a.forEach(function(e){e.hasAttribute("data-lazy-srcset")&&(e.setAttribute("srcset",e.getAttribute("data-lazy-srcset")),e.removeAttribute("data-lazy-srcset"))}),e.setAttribute("src",e.getAttribute("data-lazy-src")),e.removeAttribute("data-lazy-src")}function i(t){var n=document.createElement("div");for(n.innerHTML=function(t){var n=t.textContent||t.innerHTML,i="data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 "+((n.match(/width=['"](\d+)['"]/)||!1)[1]||1)+" "+((n.match(/height=['"](\d+)['"]/)||!1)[1]||1)+"%27%3E%3C/svg%3E";return(/<img/gim.test(n)&&!r||/<iframe/gim.test(n)&&!a)&&o&&(n=void 0===e?n.replace(/(?:\r\n|\r|\n|\t| )src=/g,' lazyload="1" src='):(n=n.replace("<source",'<source srcset="'+i+'" data-lazy-remove="true"></source>\n<source')).replace(/(?:\r\n|\r|\n|\t| )srcset=/g," data-lazy-srcset=").replace(/(?:\r\n|\r|\n|\t| )src=/g,' src="'+i+'" data-lazy-src=')),n}(t);n.firstChild;){var i=n.firstChild;if(o&&void 0!==e&&i.tagName&&(("img"===i.tagName.toLowerCase()||"picture"===i.tagName.toLowerCase())&&!r||"iframe"===i.tagName.toLowerCase()&&!a)){var c="picture"===i.tagName.toLowerCase()?n.querySelector("img"):i;e.observe(c)}t.parentNode.insertBefore(i,t)}t.parentNode.removeChild(t)}window.NodeList&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),"IntersectionObserver"in window&&(e=new IntersectionObserver(function(e,t){e.forEach(function(e){if(0!==e.intersectionRatio){var r=e.target;t.unobserve(r),n(r)}})},t));let c=()=>{document.querySelectorAll("noscript.loading-lazy").forEach(e=>i(e)),void 0!==window.matchMedia&&window.matchMedia("print").addListener(function(e){e.matches&&document.querySelectorAll(t.lazyImage+"[data-lazy-src],"+t.lazyIframe+"[data-lazy-src]").forEach(function(e){n(e)})})};/comp|inter/.test(document.readyState)?c():"addEventListener"in document?document.addEventListener("DOMContentLoaded",function(){c()}):document.attachEvent("onreadystatechange",function(){"complete"===document.readyState&&c()});const s={prepareElement:i};export default s;
 //# sourceMappingURL=loading-attribute-polyfill.modern.js.map

dist/loading-attribute-polyfill.module.js

@@ -1,2 +0,2 @@
-var e,t={rootMargin:"0px 0px 256px 0px",threshold:.01,lazyImage:'img[loading="lazy"]',lazyIframe:'iframe[loading="lazy"]'},r="loading"in HTMLImageElement.prototype,a="loading"in HTMLIFrameElement.prototype,o="onscroll"in window;window.NodeList&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),"IntersectionObserver"in window&&(e=new IntersectionObserver(function(e,t){e.forEach(function(e){if(0!==e.intersectionRatio){var r=e.target;t.unobserve(r),i(r)}})},t));var n="requestAnimationFrame"in window?window.requestAnimationFrame:function(e){e()};function i(e){var t,r,a=[];"picture"===e.parentNode.tagName.toLowerCase()&&((r=(t=e.parentNode).querySelector("source[data-lazy-remove]"))&&t.removeChild(r),a=Array.prototype.slice.call(e.parentNode.querySelectorAll("source"))),a.push(e),a.forEach(function(e){e.hasAttribute("data-lazy-srcset")&&(e.setAttribute("srcset",e.getAttribute("data-lazy-srcset")),e.removeAttribute("data-lazy-srcset"))}),e.setAttribute("src",e.getAttribute("data-lazy-src")),e.removeAttribute("data-lazy-src")}function c(t){var n=document.createElement("div");for(n.innerHTML=function(t){var n=t.textContent||t.innerHTML,i="data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 "+((n.match(/width=['"](\d+)['"]/)||!1)[1]||1)+" "+((n.match(/height=['"](\d+)['"]/)||!1)[1]||1)+"%27%3E%3C/svg%3E";return(/<img/gim.test(n)&&!r||/<iframe/gim.test(n)&&!a)&&o&&(n=void 0===e?n.replace(/(?:\r\n|\r|\n|\t| )src=/g,' lazyload="1" src='):(n=n.replace("<source",'<source srcset="'+i+'" data-lazy-remove="true"></source>\n<source')).replace(/(?:\r\n|\r|\n|\t| )srcset=/g," data-lazy-srcset=").replace(/(?:\r\n|\r|\n|\t| )src=/g,' src="'+i+'" data-lazy-src=')),n}(t);n.firstChild;){var i=n.firstChild;if(o&&void 0!==e&&i.tagName&&(("img"===i.tagName.toLowerCase()||"picture"===i.tagName.toLowerCase())&&!r||"iframe"===i.tagName.toLowerCase()&&!a)){var c="picture"===i.tagName.toLowerCase()?n.querySelector("img"):i;e.observe(c)}t.parentNode.insertBefore(i,t)}t.parentNode.removeChild(t)}var s=function(){document.querySelectorAll("noscript.loading-lazy").forEach(function(e){return c(e)}),void 0!==window.matchMedia&&window.matchMedia("print").addListener(function(e){e.matches&&document.querySelectorAll(t.lazyImage+"[data-lazy-src],"+t.lazyIframe+"[data-lazy-src]").forEach(function(e){i(e)})})};/comp|inter/.test(document.readyState)?n(s):"addEventListener"in document?document.addEventListener("DOMContentLoaded",function(){n(s)}):document.attachEvent("onreadystatechange",function(){"complete"===document.readyState&&s()});var d={prepareElement:c};export default d;
+var e,t={rootMargin:"0px 0px 256px 0px",threshold:.01,lazyImage:'img[loading="lazy"]',lazyIframe:'iframe[loading="lazy"]'},r="loading"in HTMLImageElement.prototype,a="loading"in HTMLIFrameElement.prototype,o="onscroll"in window;function n(e){var t,r,a=[];"picture"===e.parentNode.tagName.toLowerCase()&&((r=(t=e.parentNode).querySelector("source[data-lazy-remove]"))&&t.removeChild(r),a=Array.prototype.slice.call(e.parentNode.querySelectorAll("source"))),a.push(e),a.forEach(function(e){e.hasAttribute("data-lazy-srcset")&&(e.setAttribute("srcset",e.getAttribute("data-lazy-srcset")),e.removeAttribute("data-lazy-srcset"))}),e.setAttribute("src",e.getAttribute("data-lazy-src")),e.removeAttribute("data-lazy-src")}function i(t){var n=document.createElement("div");for(n.innerHTML=function(t){var n=t.textContent||t.innerHTML,i="data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 "+((n.match(/width=['"](\d+)['"]/)||!1)[1]||1)+" "+((n.match(/height=['"](\d+)['"]/)||!1)[1]||1)+"%27%3E%3C/svg%3E";return(/<img/gim.test(n)&&!r||/<iframe/gim.test(n)&&!a)&&o&&(n=void 0===e?n.replace(/(?:\r\n|\r|\n|\t| )src=/g,' lazyload="1" src='):(n=n.replace("<source",'<source srcset="'+i+'" data-lazy-remove="true"></source>\n<source')).replace(/(?:\r\n|\r|\n|\t| )srcset=/g," data-lazy-srcset=").replace(/(?:\r\n|\r|\n|\t| )src=/g,' src="'+i+'" data-lazy-src=')),n}(t);n.firstChild;){var i=n.firstChild;if(o&&void 0!==e&&i.tagName&&(("img"===i.tagName.toLowerCase()||"picture"===i.tagName.toLowerCase())&&!r||"iframe"===i.tagName.toLowerCase()&&!a)){var c="picture"===i.tagName.toLowerCase()?n.querySelector("img"):i;e.observe(c)}t.parentNode.insertBefore(i,t)}t.parentNode.removeChild(t)}window.NodeList&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),"IntersectionObserver"in window&&(e=new IntersectionObserver(function(e,t){e.forEach(function(e){if(0!==e.intersectionRatio){var r=e.target;t.unobserve(r),n(r)}})},t));var c=function(){document.querySelectorAll("noscript.loading-lazy").forEach(function(e){return i(e)}),void 0!==window.matchMedia&&window.matchMedia("print").addListener(function(e){e.matches&&document.querySelectorAll(t.lazyImage+"[data-lazy-src],"+t.lazyIframe+"[data-lazy-src]").forEach(function(e){n(e)})})};/comp|inter/.test(document.readyState)?c():"addEventListener"in document?document.addEventListener("DOMContentLoaded",function(){c()}):document.attachEvent("onreadystatechange",function(){"complete"===document.readyState&&c()});var s={prepareElement:i};export default s;
 //# sourceMappingURL=loading-attribute-polyfill.module.js.map

dist/loading-attribute-polyfill.umd.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e||self).loadingAttributePolyfill=t()}(this,function(){var e,t={rootMargin:"0px 0px 256px 0px",threshold:.01,lazyImage:'img[loading="lazy"]',lazyIframe:'iframe[loading="lazy"]'},r="loading"in HTMLImageElement.prototype,a="loading"in HTMLIFrameElement.prototype,o="onscroll"in window;window.NodeList&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),"IntersectionObserver"in window&&(e=new IntersectionObserver(function(e,t){e.forEach(function(e){if(0!==e.intersectionRatio){var r=e.target;t.unobserve(r),i(r)}})},t));var n="requestAnimationFrame"in window?window.requestAnimationFrame:function(e){e()};function i(e){var t,r,a=[];"picture"===e.parentNode.tagName.toLowerCase()&&((r=(t=e.parentNode).querySelector("source[data-lazy-remove]"))&&t.removeChild(r),a=Array.prototype.slice.call(e.parentNode.querySelectorAll("source"))),a.push(e),a.forEach(function(e){e.hasAttribute("data-lazy-srcset")&&(e.setAttribute("srcset",e.getAttribute("data-lazy-srcset")),e.removeAttribute("data-lazy-srcset"))}),e.setAttribute("src",e.getAttribute("data-lazy-src")),e.removeAttribute("data-lazy-src")}function c(t){var n=document.createElement("div");for(n.innerHTML=function(t){var n=t.textContent||t.innerHTML,i="data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 "+((n.match(/width=['"](\d+)['"]/)||!1)[1]||1)+" "+((n.match(/height=['"](\d+)['"]/)||!1)[1]||1)+"%27%3E%3C/svg%3E";return(/<img/gim.test(n)&&!r||/<iframe/gim.test(n)&&!a)&&o&&(n=void 0===e?n.replace(/(?:\r\n|\r|\n|\t| )src=/g,' lazyload="1" src='):(n=n.replace("<source",'<source srcset="'+i+'" data-lazy-remove="true"></source>\n<source')).replace(/(?:\r\n|\r|\n|\t| )srcset=/g," data-lazy-srcset=").replace(/(?:\r\n|\r|\n|\t| )src=/g,' src="'+i+'" data-lazy-src=')),n}(t);n.firstChild;){var i=n.firstChild;if(o&&void 0!==e&&i.tagName&&(("img"===i.tagName.toLowerCase()||"picture"===i.tagName.toLowerCase())&&!r||"iframe"===i.tagName.toLowerCase()&&!a)){var c="picture"===i.tagName.toLowerCase()?n.querySelector("img"):i;e.observe(c)}t.parentNode.insertBefore(i,t)}t.parentNode.removeChild(t)}var d=function(){document.querySelectorAll("noscript.loading-lazy").forEach(function(e){return c(e)}),void 0!==window.matchMedia&&window.matchMedia("print").addListener(function(e){e.matches&&document.querySelectorAll(t.lazyImage+"[data-lazy-src],"+t.lazyIframe+"[data-lazy-src]").forEach(function(e){i(e)})})};return/comp|inter/.test(document.readyState)?n(d):"addEventListener"in document?document.addEventListener("DOMContentLoaded",function(){n(d)}):document.attachEvent("onreadystatechange",function(){"complete"===document.readyState&&d()}),{prepareElement:c}});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e||self).loadingAttributePolyfill=t()}(this,function(){var e,t={rootMargin:"0px 0px 256px 0px",threshold:.01,lazyImage:'img[loading="lazy"]',lazyIframe:'iframe[loading="lazy"]'},r="loading"in HTMLImageElement.prototype,a="loading"in HTMLIFrameElement.prototype,o="onscroll"in window;function n(e){var t,r,a=[];"picture"===e.parentNode.tagName.toLowerCase()&&((r=(t=e.parentNode).querySelector("source[data-lazy-remove]"))&&t.removeChild(r),a=Array.prototype.slice.call(e.parentNode.querySelectorAll("source"))),a.push(e),a.forEach(function(e){e.hasAttribute("data-lazy-srcset")&&(e.setAttribute("srcset",e.getAttribute("data-lazy-srcset")),e.removeAttribute("data-lazy-srcset"))}),e.setAttribute("src",e.getAttribute("data-lazy-src")),e.removeAttribute("data-lazy-src")}function i(t){var n=document.createElement("div");for(n.innerHTML=function(t){var n=t.textContent||t.innerHTML,i="data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 "+((n.match(/width=['"](\d+)['"]/)||!1)[1]||1)+" "+((n.match(/height=['"](\d+)['"]/)||!1)[1]||1)+"%27%3E%3C/svg%3E";return(/<img/gim.test(n)&&!r||/<iframe/gim.test(n)&&!a)&&o&&(n=void 0===e?n.replace(/(?:\r\n|\r|\n|\t| )src=/g,' lazyload="1" src='):(n=n.replace("<source",'<source srcset="'+i+'" data-lazy-remove="true"></source>\n<source')).replace(/(?:\r\n|\r|\n|\t| )srcset=/g," data-lazy-srcset=").replace(/(?:\r\n|\r|\n|\t| )src=/g,' src="'+i+'" data-lazy-src=')),n}(t);n.firstChild;){var i=n.firstChild;if(o&&void 0!==e&&i.tagName&&(("img"===i.tagName.toLowerCase()||"picture"===i.tagName.toLowerCase())&&!r||"iframe"===i.tagName.toLowerCase()&&!a)){var c="picture"===i.tagName.toLowerCase()?n.querySelector("img"):i;e.observe(c)}t.parentNode.insertBefore(i,t)}t.parentNode.removeChild(t)}window.NodeList&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),"IntersectionObserver"in window&&(e=new IntersectionObserver(function(e,t){e.forEach(function(e){if(0!==e.intersectionRatio){var r=e.target;t.unobserve(r),n(r)}})},t));var c=function(){document.querySelectorAll("noscript.loading-lazy").forEach(function(e){return i(e)}),void 0!==window.matchMedia&&window.matchMedia("print").addListener(function(e){e.matches&&document.querySelectorAll(t.lazyImage+"[data-lazy-src],"+t.lazyIframe+"[data-lazy-src]").forEach(function(e){n(e)})})};return/comp|inter/.test(document.readyState)?c():"addEventListener"in document?document.addEventListener("DOMContentLoaded",function(){c()}):document.attachEvent("onreadystatechange",function(){"complete"===document.readyState&&c()}),{prepareElement:i}});
 //# sourceMappingURL=loading-attribute-polyfill.umd.js.map

package.json

 {
   "name": "loading-attribute-polyfill",
-  "version": "2.0.0-rc.0",
+  "version": "2.0.0-rc.1",
   "description": "Fast and lightweight dependency-free vanilla JavaScript polyfill for native lazy loading / the awesome loading='lazy'-attribute.",
-  "source": "./loading-attribute-polyfill.js",
+  "source": "./src/loading-attribute-polyfill.js",
   "main": "./dist/loading-attribute-polyfill.js",
@@ -33,11 +33,11 @@ "esmodule": "./dist/loading-attribute-polyfill.modern.js",
   "devDependencies": {
-    "@commitlint/cli": "^12.0.1",
-    "@commitlint/config-conventional": "^12.0.1",
-    "@wdio/cli": "^7.1.0",
-    "@wdio/dot-reporter": "^7.0.7",
-    "@wdio/local-runner": "^7.1.0",
-    "@wdio/mocha-framework": "^7.0.7",
-    "@wdio/sync": "^7.1.0",
-    "html-validate": "^4.6.1",
-    "husky": "^5.1.3",
+    "@commitlint/cli": "^12.1.1",
+    "@commitlint/config-conventional": "^12.1.1",
+    "@wdio/cli": "^7.3.0",
+    "@wdio/dot-reporter": "^7.3.0",
+    "@wdio/local-runner": "^7.3.0",
+    "@wdio/mocha-framework": "^7.3.0",
+    "@wdio/sync": "^7.3.0",
+    "html-validate": "^4.8.0",
+    "husky": "^6.0.0",
     "microbundle": "^0.13.0",
@@ -51,3 +51,3 @@ "npm-run-all": "^4.1.5",
     "test": "run-p validate:* lint:*",
-    "lint:xo": "xo loading-attribute-polyfill.js",
+    "lint:xo": "xo src/loading-attribute-polyfill.js",
     "validate:html": "html-validate demo/index.html",
@@ -54,0 +54,0 @@ "test:wdio": "wdio run wdio.conf-crossbrowsertesting.js",

README.md

@@ -10,2 +10,3 @@ # loading="lazy" attribute polyfill
 [![CodeQL](https://github.com/mfranzke/loading-attribute-polyfill/actions/workflows/codeql-analysis.yml/badge.svg?branch=master)](https://github.com/mfranzke/loading-attribute-polyfill/actions/workflows/codeql-analysis.yml)
+[![GitHub Super-Linter](https://github.com/mfranzke/loading-attribute-polyfill/workflows/Lint%20Code%20Base/badge.svg)](https://github.com/mfranzke/loading-attribute-polyfill/actions/workflows/linter.yml)
 [![dependencies Status](https://david-dm.org/mfranzke/loading-attribute-polyfill/status.svg "Count of dependencies")](https://david-dm.org/mfranzke/loading-attribute-polyfill "loading-attribute polyfill – on david-dm")
@@ -51,5 +52,18 @@ [![loading-attribute-polyfill on Npmjs](https://img.shields.io/npm/v/loading-attribute-polyfill.svg?color=rgb%28237%2C%2028%2C%2036%29 "npm version")](https://npmjs.com/package/loading-attribute-polyfill 'loading="lazy"-attribute polyfill – on NPM')
 
+Include one of the provided JavaScript files depending on your setup plus the CSS file:
+
+```html
+<script src="dist/loading-attribute-polyfill.js" async></script>
+<link rel="stylesheet" href="dist/loading-attribute-polyfill.css" />
+```
+
+or e.g. within JS
+
+```js
+import loadingAttributePolyfill from "node_modules/loading-attribute-polyfill/dist/loading-attribute-polyfill.module.js";
+```
+
 Afterwards, you need to wrap all of your `<img>` and `<iframe>` HTML tags (in the case of `<picture>` use the complementary `<source>` HTML tags) that you'd like to lazy load with a `<noscript>` HTML tag (with the attribute `class="loading-lazy"`.)
 
-Please keep in mind that it's beneficial to even also include `width` and `height` attributes on `<img>` HTML tags, as the browser could determine the aspect ratio via those two attributes values being set (even if you overwrite them via CSS), compare to the great work by Jen Simmons on this topic, e.g. within these articles <https://css-tricks.com/do-this-to-improve-image-loading-on-your-website/> (with video) or <https://css-tricks.com/what-if-we-got-aspect-ratio-sized-images-by-doing-almost-nothing/>
+Please keep in mind that it's important to even also include `width` and `height` attributes on `<img>` HTML tags, as the browser could determine the aspect ratio via those two attributes values being set (even if you overwrite them via CSS), compare to the great work by Jen Simmons on this topic, e.g. within these articles <https://css-tricks.com/do-this-to-improve-image-loading-on-your-website/> (with video) or <https://css-tricks.com/what-if-we-got-aspect-ratio-sized-images-by-doing-almost-nothing/>
 
@@ -176,13 +190,19 @@ And please "Avoid lazy-loading images that are in the first visible viewport", compare to [the article "Browser-level image lazy-loading for the web"](https://web.dev/browser-level-image-lazy-loading/#avoid-lazy-loading-images-that-are-in-the-first-visible-viewport) published on web.dev:
 
-  - macOS 10.14, Mozilla Firefox 68.0.1 (manually, localhost)
-  - macOS 10.14, Safari 12 (via CrossBrowserTesting)
-  - macOS 10.13, Safari 11 (via CrossBrowserTesting)
+  - Safari 14, macOS 11 (via CrossBrowserTesting)
+  - Mozilla Firefox _latest_, macOS 10.14 (manually, localhost)
+  <!-- - macOS 10.14, Safari 12 (via CrossBrowserTesting)
+  - macOS 10.13, Safari 11 (via CrossBrowserTesting) -->
 
 - iOS
-  - iPad 6th Generation Simulator, Mobile Safari 12.0 (via CrossBrowserTesting)
+
+  - Mobile Safari 12.0, iPad 6th Generation Simulator (manually)
+
 - Windows
-  - Windows 10, Google Chrome / versions latest & latest-1 (via CrossBrowserTesting)
-  - Windows 10, Microsoft Edge / versions 17, 18 (via CrossBrowserTesting)
-  - Windows 10, Microsoft Internet Explorer / version 11 (via CrossBrowserTesting) - Windows 7 SP1, Internet Explorer 9.0.8112.16421 (manually, localhost)
 
+  - Google Chrome _latest_, Windows 10 (via CrossBrowserTesting)
+  - Mozilla Firefox _latest_, Windows 10 (via CrossBrowserTesting)
+  - Microsoft Edge version 18, Windows 10 (manually, localhost)
+  - Microsoft Internet Explorer version 11, Windows 10 (via CrossBrowserTesting)
+  - Internet Explorer 9.0.8112.16421, Windows 7 SP1 (manually, localhost)
+
 ### Big Thanks
@@ -189,0 +209,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

96932

increased by0.69%

Number of package files

30

increased by36.36%

Number of lines in readme file

226

increased by9.71%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes