loading-attribute-polyfill - npm Package Compare versions

Comparing version 1.5.1 to 1.5.2

bower.json

 {
 	"name": "loading-attribute-polyfill",
 	"description": "Fast and lightweight dependency-free vanilla JavaScript polyfill for native lazy loading / the awesome loading='lazy'-attribute.",
-	"version": "1.5.1",
+	"version": "1.5.2",
 	"homepage": "https://github.com/mfranzke/loading-attribute-polyfill",
@@ -6,0 +6,0 @@ "authors": [

CHANGELOG.md

@@ -9,2 +9,13 @@ # Changelog
 
+## [1.5.2] - 2020-03-19
+
+### Added
+
+- improvement(prettier): run prettier when committing files
+
+### Changed
+
+- Formatting and code & content optimizations
+- xo: added further rules for IE9 compatibility
+
 ## [1.5.1] - 2020-03-15
@@ -11,0 +22,0 @@

loading-attribute-polyfill.js

@@ -78,3 +78,3 @@ /*
 
-		 // Not using .dataset within those upfollowing lines of code for polyfill independent compatibility down to IE9
+		// Not using .dataset within those upfollowing lines of code for polyfill independent compatibility down to IE9
 		srcsetItems.forEach(function(item) {
@@ -161,13 +161,15 @@ if (item.hasAttribute('data-lazy-srcset')) {
 
-		var getImageWidth = lazyAreaHtml.match(/width=[\'\"]([0-9]+)[\'\"]/) || false;
+		var getImageWidth = lazyAreaHtml.match(/width=['"](\d+)['"]/) || false;
 		var temporaryImageWidth = getImageWidth[1] || 1;
-		var getImageHeight = lazyAreaHtml.match(/height=[\'\"]([0-9]+)[\'\"]/) || false;
+		var getImageHeight = lazyAreaHtml.match(/height=['"](\d+)['"]/) || 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";
+		var temporaryImage =
+			'data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 ' +
+			temporaryImageWidth +
+			' ' +
+			temporaryImageHeight +
+			'%27%3E%3C/svg%3E';
 
-		if (
-			!capabilities.loading &&
-			capabilities.scrolling
-		) {
+		if (!capabilities.loading && capabilities.scrolling) {
 			// Check for IntersectionObserver support
@@ -249,3 +251,4 @@ if (typeof intersectionObserver === 'undefined') {
 	// Use requestAnimationFrame as this will propably cause repaints
-	if (/comp|inter/.test(document.readyState)) { // https://www.w3schools.com/jsref/prop_doc_readystate.asp
+	// document.readyState values: https://www.w3schools.com/jsref/prop_doc_readystate.asp
+	if (/comp|inter/.test(document.readyState)) {
 		rAFWrapper(prepareElements);
@@ -263,2 +266,2 @@ } else if ('addEventListener' in document) {
 	}
-}('loading-lazy', '256px 0px'));
+})('loading-lazy', '256px 0px');

loading-attribute-polyfill.min.js

@@ -6,2 +6,129 @@ /*
  */
-!function(e,t){"use strict";var r,a,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,r,a=[];"picture"===e.parentNode.tagName.toLowerCase()&&(t=e.parentNode,(r=t.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(e){var t=document.createElement("div");for(t.innerHTML=function(e){var t=e.textContent||e.innerHTML,a="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===r?t=t.replace(/(?:\r\n|\r|\n|\t| )src=/g,' lazyload="1" src='):("picture"===e.parentNode.tagName.toLowerCase()&&(t='<source srcset="'+a+'" 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="'+a+'" data-lazy-src='))),t}(e);t.firstChild;)n.loading||!n.scrolling||void 0===r||!t.firstChild.tagName||"img"!==t.firstChild.tagName.toLowerCase()&&"iframe"!==t.firstChild.tagName.toLowerCase()||r.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){i(e)}))}))}"undefined"!=typeof NodeList&&NodeList.prototype&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=Array.prototype.forEach),"IntersectionObserver"in window&&(r=new IntersectionObserver((function(e,t){e.forEach((function(e){if(0!==e.intersectionRatio){var r=e.target;t.unobserve(r),i(r)}}))}),o)),a="requestAnimationFrame"in window?window.requestAnimationFrame:function(e){e()},/comp|inter/.test(document.readyState)?a(s):"addEventListener"in document?document.addEventListener("DOMContentLoaded",(function(){a(s)})):document.attachEvent("onreadystatechange",(function(){"complete"===document.readyState&&s()}))}("loading-lazy");
+!(function(e, t) {
+	'use strict';
+	var r,
+		a,
+		o = {
+			rootMargin: '256px 0px',
+			threshold: 0.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,
+			r,
+			a = [];
+		'picture' === e.parentNode.tagName.toLowerCase() &&
+			((t = e.parentNode),
+			(r = t.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(e) {
+		var t = document.createElement('div');
+		for (
+			t.innerHTML = (function(e) {
+				var t = e.textContent || e.innerHTML,
+					a =
+						'data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 ' +
+						((t.match(/width=['"](\d+)['"]/) || !1)[1] || 1) +
+						' ' +
+						((t.match(/height=['"](\d+)['"]/) || !1)[1] || 1) +
+						'%27%3E%3C/svg%3E';
+				return (
+					!n.loading &&
+						n.scrolling &&
+						(void 0 === r
+							? (t = t.replace(
+									/(?:\r\n|\r|\n|\t| )src=/g,
+									' lazyload="1" src='
+							  ))
+							: ('picture' === e.parentNode.tagName.toLowerCase() &&
+									(t =
+										'<source srcset="' +
+										a +
+										'" 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="' + a + '" data-lazy-src='
+									)))),
+					t
+				);
+			})(e);
+			t.firstChild;
+
+		)
+			n.loading ||
+				!n.scrolling ||
+				void 0 === r ||
+				!t.firstChild.tagName ||
+				('img' !== t.firstChild.tagName.toLowerCase() &&
+					'iframe' !== t.firstChild.tagName.toLowerCase()) ||
+				r.observe(t.firstChild),
+				e.parentNode.insertBefore(t.firstChild, e);
+		e.parentNode.removeChild(e);
+	}
+	function d() {
+		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) {
+								i(e);
+							});
+				});
+	}
+	'undefined' != typeof NodeList &&
+		NodeList.prototype &&
+		!NodeList.prototype.forEach &&
+		(NodeList.prototype.forEach = Array.prototype.forEach),
+		'IntersectionObserver' in window &&
+			(r = new IntersectionObserver(function(e, t) {
+				e.forEach(function(e) {
+					if (0 !== e.intersectionRatio) {
+						var r = e.target;
+						t.unobserve(r), i(r);
+					}
+				});
+			}, o)),
+		(a =
+			'requestAnimationFrame' in window
+				? window.requestAnimationFrame
+				: function(e) {
+						e();
+				  }),
+		/comp|inter/.test(document.readyState)
+			? a(d)
+			: 'addEventListener' in document
+			? document.addEventListener('DOMContentLoaded', function() {
+					a(d);
+			  })
+			: document.attachEvent('onreadystatechange', function() {
+					'complete' === document.readyState && d();
+			  });
+})('loading-lazy');

package.json

 {
   "name": "loading-attribute-polyfill",
-  "version": "1.5.1",
+  "version": "1.5.2",
   "description": "Fast and lightweight dependency-free vanilla JavaScript polyfill for native lazy loading / the awesome loading='lazy'-attribute.",
@@ -38,2 +38,3 @@ "main": "loading-attribute-polyfill.min.js",
     "prettier": "1.19.1",
+    "pretty-quick": "^2.0.1",
     "webdriverio": "^5.21.0",
@@ -50,4 +51,12 @@ "xo": "^0.28.0"
     "prettier": true,
-    "esnext": false
+    "esnext": false,
+    "rules": {
+      "unicorn/prefer-node-remove": "off"
+    }
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "pretty-quick --staged"
+    }
   }
 }

README.md

 # loading="lazy" attribute polyfill
 
 [![MIT license](https://img.shields.io/npm/l/loading-attribute-polyfill.svg "license badge")](https://opensource.org/licenses/mit-license.php)
-[![loading-attribute-polyfill on Npmjs](https://img.shields.io/npm/v/loading-attribute-polyfill.svg "npm version")](https://npmjs.com/package/loading-attribute-polyfill "loading=\"lazy\"-attribute polyfill – on NPM")
-[![Total downloads ~ Npmjs](https://img.shields.io/npm/dt/loading-attribute-polyfill.svg "Count of total downloads – NPM")](https://npmjs.com/package/loading-attribute-polyfill "loading=\"lazy\"-attribute polyfill – on NPM")
+[![npm bundle size](https://img.shields.io/bundlephobia/minzip/loading-attribute-polyfill)](https://bundlephobia.com/result?p=loading-attribute-polyfill)
+[![Total downloads ~ Npmjs](https://img.shields.io/npm/dt/loading-attribute-polyfill.svg "Count of total downloads – NPM")](https://npmjs.com/package/loading-attribute-polyfill 'loading="lazy"-attribute polyfill – on NPM')
 [![jsDelivr CDN downloads](https://data.jsdelivr.com/v1/package/npm/loading-attribute-polyfill/badge "Count of total downloads – jsDelivr")](https://www.jsdelivr.com/package/npm/loading-attribute-polyfill "loading-attribute polyfill – on jsDelivr")
+[![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')
 [![Codacy Badge](https://api.codacy.com/project/badge/Grade/16c763924903400ca82cfed618a82a6e)](https://app.codacy.com/app/mfranzke_2/loading-attribute-polyfill?utm_source=github.com&utm_medium=referral&utm_content=mfranzke/loading-attribute-polyfill&utm_campaign=Badge_Grade_Dashboard)
+[![Greenkeeper badge](https://badges.greenkeeper.io/mfranzke/loading-attribute-polyfill.svg)](https://greenkeeper.io/)
 [![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")
@@ -12,3 +14,2 @@ [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
 [![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg)](https://conventionalcommits.org)
-[![Greenkeeper badge](https://badges.greenkeeper.io/mfranzke/loading-attribute-polyfill.svg)](https://greenkeeper.io/)
 
@@ -18,6 +19,8 @@ Fast and lightweight vanilla JavaScript polyfill for native lazy loading, meaning the behaviour to load elements right before they enter the viewport. Provides graceful degradation, and is - not just thatfor - SEO friendly. Handles images with `srcset` and within `picture`, as well as `iframe` elements. `loading="lazy"` will be a huge improvement for todays web performance challenges, so use and polyfill it today!
 - Released under the MIT license
-- Made in Germany
+- Made in Germany. And supported by so many great people from all over this planet - see "Credits" accordingly.
+- Compatible down to Microsoft Internet Explorer 9
 
 ## Features
 
+- Lightweight (see the badge above)
 - Web standards: supports the standard `loading="lazy"` attribute on `image` and `iframe` elements
@@ -53,9 +56,3 @@ - Performance: it's based on highly efficient, best practice code.
 <noscript class="loading-lazy">
-    <img
-        src="simpleimage.jpg"
-        loading="lazy"
-        alt=".."
-        width="250"
-        height="150"
-    />
+	<img src="simpleimage.jpg" loading="lazy" alt=".." width="250" height="150" />
 </noscript>
@@ -68,24 +65,16 @@ ```
 <picture>
-    <noscript class="loading-lazy">
-        <source
-            media="(min-width: 40em)"
-            srcset="
-                simpleimage.huge.jpg 1x,
-                simpleimage.huge.2x.jpg 2x
-            "
-        />
-        <source
-            srcset="
-                simpleimage.jpg 1x,
-                simpleimage.2x.jpg 2x
-            "
-        />
-        <img
-            src="simpleimage.jpg"
-            loading="lazy"
-            alt=".."
-            width="250"
-            height="150"
-        />
-    </noscript>
+	<noscript class="loading-lazy">
+		<source
+			media="(min-width: 40em)"
+			srcset="simpleimage.huge.jpg 1x, simpleimage.huge.2x.jpg 2x"
+		/>
+		<source srcset="simpleimage.jpg 1x, simpleimage.2x.jpg 2x" />
+		<img
+			src="simpleimage.jpg"
+			loading="lazy"
+			alt=".."
+			width="250"
+			height="150"
+		/>
+	</noscript>
 </picture>
@@ -98,13 +87,13 @@ ```
 <noscript class="loading-lazy">
-    <img
-        src="simpleimage.jpg"
-        srcset="
-            simpleimage.1024.jpg 1024w,
-            simpleimage.640.jpg   640w,
-            simpleimage.320.jpg   320w
-        "
-        sizes="(min-width: 36em) 33.3vw, 100vw"
-        alt="A rad wolf"
-        loading="lazy"
-    />
+	<img
+		src="simpleimage.jpg"
+		srcset="
+			simpleimage.1024.jpg 1024w,
+			simpleimage.640.jpg   640w,
+			simpleimage.320.jpg   320w
+		"
+		sizes="(min-width: 36em) 33.3vw, 100vw"
+		alt="A rad wolf"
+		loading="lazy"
+	/>
 </noscript>
@@ -117,8 +106,8 @@ ```
 <noscript class="loading-lazy">
-    <iframe
-        src="https://player.vimeo.com/video/87110435"
-        width="320"
-        height="180"
-        loading="lazy"
-    ></iframe>
+	<iframe
+		src="https://player.vimeo.com/video/87110435"
+		width="320"
+		height="180"
+		loading="lazy"
+	></iframe>
 </noscript>
@@ -151,3 +140,3 @@ ```
 
-Nothing really, just plug it in, it ~~will~~ should work out of the box.
+Nothing really, just integrate it as shown within the "installation" section, and it ~~will~~ should work out of the box.
 
@@ -178,15 +167,15 @@ ## Demo
 
--  Mac
-    -  macOS 10.14, Mozilla Firefox 68.0.1 (manually, localhost)
-    -  macOS 10.14, Safari 12 (via CrossBrowserTesting)
-    -  macOS 10.13, Safari 11 (via CrossBrowserTesting)
+- Mac
 
--  iOS
-    -  iPad 6th Generation Simulator, Mobile Safari 12.0 (via CrossBrowserTesting)
-    
--  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)
+  - macOS 10.14, Mozilla Firefox 68.0.1 (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)
+- 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)
+
 ### Big Thanks
@@ -193,0 +182,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

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

31332

increased by4.53%

Lines of code

397

increased by48.69%

Worsened metrics

Dev dependency count

12

increased by9.09%

Number of lines in readme file

194

decreased by-5.37%

No dependency changes