loading-attribute-polyfill - npm Package Compare versions

Comparing version 1.3.1 to 1.4.0

CHANGELOG.md

@@ -9,2 +9,17 @@ # Changelog
 
+## [1.4.0] - 2020-01-25
+
+### Added
+
+- Commitlint & husky for CI
+
+### Changed
+
+- Update placeholder to SVG to prevent reflow on lazyloaded images #48
+- Updated webdriverio and xo dependencies
+
+### Fixed
+
+- README needed better wording to avoid confusion on installation/integration process #46
+
 ## [1.3.1] - 2019-11-10
@@ -11,0 +26,0 @@

loading-attribute-polyfill.js

 /*
  * Loading attribute polyfill - https://github.com/mfranzke/loading-attribute-polyfill
  * @license Copyright(c) 2019 by Maximilian Franzke
- * Credits for the initial kickstarter / script to @Sora2455, and supported by @cbirdsong, @eklingen, @DaPo, @nextgenthemes, @diogoterremoto, @dracos and @Flimm - many thanks for that !
+ * Credits for the initial kickstarter / script to @Sora2455, and supported by @cbirdsong, @eklingen, @DaPo, @nextgenthemes, @diogoterremoto, @dracos, @Flimm and @TomS- - many thanks for that !
  */
@@ -60,5 +60,2 @@ /*
 
-	var temporaryImage =
-		'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
-
 	/**
@@ -163,2 +160,9 @@ * Put the source and srcset back where it belongs - now that the elements content is attached to the document, it will load now
 
+		var getImageWidth = lazyAreaHtml.match(/width=[\'\"]([0-9]+)[\'\"]/) || false;
+		var temporaryImageWidth = getImageWidth[1] || 1;
+		var getImageHeight = lazyAreaHtml.match(/height=[\'\"]([0-9]+)[\'\"]/) || false;
+		var temporaryImageHeight = getImageHeight[1] || 1;
+
+		var temporaryImage = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 " + temporaryImageWidth + " " + temporaryImageHeight + "'%3E%3C/svg%3E";
+
 		if (
@@ -165,0 +169,0 @@ !capabilities.loading &&

loading-attribute-polyfill.min.js

 /*
  * Loading attribute polyfill - https://github.com/mfranzke/loading-attribute-polyfill
  * @license Copyright(c) 2019 by Maximilian Franzke
- * Credits for the initial kickstarter / script to @Sora2455, and supported by @cbirdsong, @eklingen, @DaPo, @nextgenthemes, @diogoterremoto, @dracos and @Flimm - many thanks for that !
+ * Credits for the initial kickstarter / script to @Sora2455, and supported by @cbirdsong, @eklingen, @DaPo, @nextgenthemes, @diogoterremoto, @dracos, @Flimm and @TomS- - many thanks for that !
  */
-!function(e,t){"use strict";var a,r,o={rootMargin:"256px 0px",threshold:.01,lazyImage:'img[loading="lazy"]',lazyIframe:'iframe[loading="lazy"]'},n={loading:"loading"in HTMLImageElement.prototype&&"loading"in HTMLIFrameElement.prototype,scrolling:"onscroll"in window};"undefined"!=typeof NodeList&&NodeList.prototype&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),"IntersectionObserver"in window&&(a=new IntersectionObserver((function(e,t){e.forEach((function(e){if(0!==e.intersectionRatio){var a=e.target;t.unobserve(a),d(a)}}))}),o)),r="requestAnimationFrame"in window?window.requestAnimationFrame:function(e){e()};var i="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";function d(e){var t,a,r=[];"picture"===e.parentNode.tagName.toLowerCase()&&(t=e.parentNode,(a=t.querySelector("source[data-lazy-remove]"))&&t.removeChild(a),r=Array.prototype.slice.call(e.parentNode.querySelectorAll("source"))),r.push(e),r.forEach((function(e){e.dataset.lazySrcset&&(e.setAttribute("srcset",e.dataset.lazySrcset),delete e.dataset.lazySrcset)})),e.setAttribute("src",e.dataset.lazySrc),delete e.dataset.lazySrc}function c(e){var t=document.createElement("div");for(t.innerHTML=function(e){var t=e.textContent||e.innerHTML;return!n.loading&&n.scrolling&&void 0!==document.documentElement.dataset&&(void 0===a?t=t.replace(/(?:\r\n|\r|\n|\t| )src=/g,' lazyload="1" src='):("picture"===e.parentNode.tagName.toLowerCase()&&(t='<source srcset="'+i+'" data-lazy-remove="true"></source>'+t),t=t.replace(/(?:\r\n|\r|\n|\t| )srcset=/g," data-lazy-srcset=").replace(/(?:\r\n|\r|\n|\t| )src=/g,' src="'+i+'" data-lazy-src='))),t}(e);t.firstChild;)n.loading||!n.scrolling||void 0===a||void 0===document.documentElement.dataset||!t.firstChild.tagName||"img"!==t.firstChild.tagName.toLowerCase()&&"iframe"!==t.firstChild.tagName.toLowerCase()||a.observe(t.firstChild),e.parentNode.insertBefore(t.firstChild,e);e.parentNode.removeChild(e)}function s(){document.querySelectorAll("noscript."+e).forEach(c),void 0!==window.matchMedia&&window.matchMedia("print").addListener((function(e){e.matches&&document.querySelectorAll(o.lazyImage+"[data-lazy-src],"+o.lazyIframe+"[data-lazy-src]").forEach((function(e){d(e)}))}))}/comp|inter/.test(document.readyState)?r(s):"addEventListener"in document?document.addEventListener("DOMContentLoaded",(function(){r(s)})):document.attachEvent("onreadystatechange",(function(){"complete"===document.readyState&&s()}))}("loading-lazy");
+!function(e,t){"use strict";var a,r,o={rootMargin:"256px 0px",threshold:.01,lazyImage:'img[loading="lazy"]',lazyIframe:'iframe[loading="lazy"]'},n={loading:"loading"in HTMLImageElement.prototype&&"loading"in HTMLIFrameElement.prototype,scrolling:"onscroll"in window};function i(e){var t,a,r=[];"picture"===e.parentNode.tagName.toLowerCase()&&(t=e.parentNode,(a=t.querySelector("source[data-lazy-remove]"))&&t.removeChild(a),r=Array.prototype.slice.call(e.parentNode.querySelectorAll("source"))),r.push(e),r.forEach((function(e){e.dataset.lazySrcset&&(e.setAttribute("srcset",e.dataset.lazySrcset),delete e.dataset.lazySrcset)})),e.setAttribute("src",e.dataset.lazySrc),delete e.dataset.lazySrc}function d(e){var t=document.createElement("div");for(t.innerHTML=function(e){var t=e.textContent||e.innerHTML,r="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 "+((t.match(/width=[\'\"]([0-9]+)[\'\"]/)||!1)[1]||1)+" "+((t.match(/height=[\'\"]([0-9]+)[\'\"]/)||!1)[1]||1)+"'%3E%3C/svg%3E";return!n.loading&&n.scrolling&&void 0!==document.documentElement.dataset&&(void 0===a?t=t.replace(/(?:\r\n|\r|\n|\t| )src=/g,' lazyload="1" src='):("picture"===e.parentNode.tagName.toLowerCase()&&(t='<source srcset="'+r+'" data-lazy-remove="true"></source>'+t),t=t.replace(/(?:\r\n|\r|\n|\t| )srcset=/g," data-lazy-srcset=").replace(/(?:\r\n|\r|\n|\t| )src=/g,' src="'+r+'" data-lazy-src='))),t}(e);t.firstChild;)n.loading||!n.scrolling||void 0===a||void 0===document.documentElement.dataset||!t.firstChild.tagName||"img"!==t.firstChild.tagName.toLowerCase()&&"iframe"!==t.firstChild.tagName.toLowerCase()||a.observe(t.firstChild),e.parentNode.insertBefore(t.firstChild,e);e.parentNode.removeChild(e)}function c(){document.querySelectorAll("noscript."+e).forEach(d),void 0!==window.matchMedia&&window.matchMedia("print").addListener((function(e){e.matches&&document.querySelectorAll(o.lazyImage+"[data-lazy-src],"+o.lazyIframe+"[data-lazy-src]").forEach((function(e){i(e)}))}))}"undefined"!=typeof NodeList&&NodeList.prototype&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),"IntersectionObserver"in window&&(a=new IntersectionObserver((function(e,t){e.forEach((function(e){if(0!==e.intersectionRatio){var a=e.target;t.unobserve(a),i(a)}}))}),o)),r="requestAnimationFrame"in window?window.requestAnimationFrame:function(e){e()},/comp|inter/.test(document.readyState)?r(c):"addEventListener"in document?document.addEventListener("DOMContentLoaded",(function(){r(c)})):document.attachEvent("onreadystatechange",(function(){"complete"===document.readyState&&c()}))}("loading-lazy");

package.json

 {
   "name": "loading-attribute-polyfill",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "description": "Fast and lightweight dependency-free vanilla JavaScript polyfill for native lazy loading / the awesome loading='lazy'-attribute.",
@@ -29,10 +29,13 @@ "main": "loading-attribute-polyfill.min.js",
   "devDependencies": {
-    "@wdio/cli": "^5.16.5",
-    "@wdio/dot-reporter": "^5.16.5",
-    "@wdio/local-runner": "^5.16.5",
-    "@wdio/mocha-framework": "^5.16.5",
-    "@wdio/sync": "^5.16.5",
+    "@commitlint/cli": "^8.3.4",
+    "@commitlint/config-conventional": "^8.3.4",
+    "@wdio/cli": "^5.18.6",
+    "@wdio/dot-reporter": "^5.18.6",
+    "@wdio/local-runner": "^5.18.4",
+    "@wdio/mocha-framework": "^5.16.15",
+    "@wdio/sync": "^5.18.5",
+    "husky": "^4.2.1",
     "prettier": "1.19.1",
-    "webdriverio": "^5.16.5",
-    "xo": "^0.25.0"
+    "webdriverio": "^5.18.0",
+    "xo": "^0.25.3"
   },
@@ -39,0 +42,0 @@ "scripts": {

README.md

@@ -34,3 +34,3 @@ # loading="lazy" attribute polyfill
 
-Just integrate the JavaScript file into your code - et voilà.
+First you'll need to integrate the JavaScript file into your code.
 
@@ -44,3 +44,3 @@ You may optionally load via NPM or Bower:
 
-Afterwards you'll need to wrap all of your `<img>` and `<iframe>` HTML tags that you'd like to lazy load (and thatfor added a `loading="lazy"` attribute as well) by an `<noscript>` HTML tag:
+Afterwards you have need to wrap all of your `<img>` and `<iframe>` HTML tags that you'd like to lazy load (and thatfor added a `loading="lazy"` attribute as well) by an `<noscript>` HTML tag:
 
@@ -162,3 +162,3 @@ ### Simple image
 
-Credits for the initial kickstarter / script to @Sora2455 for better expressing my ideas & concepts and support by @cbirdsong, @eklingen, @DaPo, @nextgenthemes, @diogoterremoto, @dracos and @Flimm. Thank you very much for that, highly appreciated !
+Credits for the initial kickstarter / script to @Sora2455 for better expressing my ideas & concepts and support by @cbirdsong, @eklingen, @DaPo, @nextgenthemes, @diogoterremoto, @dracos, @Flimm and @TomS-. Thank you very much for that, highly appreciated !
 
@@ -165,0 +165,0 @@ ## Tested with

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

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

232299

increased by0.44%

Number of package files

29

increased by7.41%

Worsened metrics

Dev dependency count

11

increased by37.5%

Lines of code

229

decreased by-2.55%

No dependency changes