loading-attribute-polyfill - npm Package Compare versions

Comparing version 1.0.1 to 1.1.0

bower.json

 {
 	"name": "loading-attribute-polyfill",
 	"description": "A minimal and dependency-free vanilla JavaScript polyfill for the awesome loading='lazy'-attribute.",
-	"version": "0.2.0",
+	"version": "1.1.0",
 	"homepage": "https://github.com/mfranzke/loading-attribute-polyfill",
@@ -6,0 +6,0 @@ "authors": [

CHANGELOG.md

@@ -13,2 +13,8 @@ # Changelog
 
+## [1.1.0] - 2019-08-15
+
+### Changed
+
+- Added IE, EDGE < version 16 and Safari < version 12 support
+
 ## [1.0.1] - 2019-08-10
@@ -15,0 +21,0 @@

loading-attribute-polyfill.js

@@ -26,2 +26,8 @@ /*
 
+	// Nodelist foreach polyfill / source: https://stackoverflow.com/a/46929259
+	if (typeof NodeList !== "undefined" && NodeList.prototype && !NodeList.prototype.forEach) {
+		// Yes, there's really no need for `Object.defineProperty` here
+		NodeList.prototype.forEach = Array.prototype.forEach;
+	}
+
 	// Define according to browsers support of the IntersectionObserver feature (missing e.g. on IE11 or Safari 11)
@@ -95,3 +101,3 @@ var intersectionObserver;
 
-			srcsetItems.push(...lazyItem.parentNode.querySelectorAll('source'));
+			srcsetItems = Array.prototype.slice.call(lazyItem.parentNode.querySelectorAll('source'));
 		}
@@ -203,2 +209,3 @@
 					!config.loadingSupported &&
+					typeof intersectionObserver !== 'undefined' &&
 					lazyArea.firstChild.tagName &&
@@ -216,3 +223,3 @@ (lazyArea.firstChild.tagName.toLowerCase() === 'img' ||
 			// remove the empty element
-			noScriptTag.remove();
+			noScriptTag.parentNode.removeChild(noScriptTag);
 		});
@@ -219,0 +226,0 @@

loading-attribute-polyfill.min.js

@@ -5,2 +5,2 @@ /*
  */
-!function(e,t){"use strict";var r,a,n={rootMargin:"256px 0px",threshold:.01,lazyImage:'img[loading="lazy"]',lazyIframe:'iframe[loading="lazy"]',loadingSupported:"loading"in HTMLImageElement.prototype&&"loading"in HTMLIFrameElement.prototype};"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)}})},n)),a="requestAnimationFrame"in window?window.requestAnimationFrame:function(e){e()};var o="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";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.push(...e.parentNode.querySelectorAll("source"))),a.push(e),a.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(){document.querySelectorAll("noscript."+e).forEach(function(e){var t=e.textContent||e.innerHTML;n.loadingSupported||(void 0!==r?("picture"===e.parentNode.tagName.toLowerCase()&&(t='<source srcset="'+o+'" data-lazy-remove="true"></source>'+t),t=function(e){return e.replace(/(?:\r\n|\r|\n|\t| )srcset=/g," data-lazy-srcset=").replace(/(?:\r\n|\r|\n|\t| )src=/g,' src="'+o+'" data-lazy-src=')}(t)):t=function(e){return e.replace(/(?:\r\n|\r|\n|\t| )src=/g,' lazyload="1" src=')}(t));var a=document.createElement("div");for(a.innerHTML=t;a.firstChild;)n.loadingSupported||!a.firstChild.tagName||"img"!==a.firstChild.tagName.toLowerCase()&&"iframe"!==a.firstChild.tagName.toLowerCase()||r.observe(a.firstChild),e.parentNode.insertBefore(a.firstChild,e);e.remove()}),window.matchMedia("print").addListener(function(e){e.matches&&document.querySelectorAll(n.lazyImage+"[data-lazy-src],"+n.lazyIframe+"[data-lazy-src]").forEach(function(e){i(e)})})}/comp|inter/.test(document.readyState)?a(c):"addEventListener"in document?document.addEventListener("DOMContentLoaded",function(){a(c)}):document.attachEvent("onreadystatechange",function(){"complete"===document.readyState&&c()})}("loading-lazy");
+!function(e,t){"use strict";var r,a,o={rootMargin:"256px 0px",threshold:.01,lazyImage:'img[loading="lazy"]',lazyIframe:'iframe[loading="lazy"]',loadingSupported:"loading"in HTMLImageElement.prototype&&"loading"in HTMLIFrameElement.prototype};"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()};var n="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";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.dataset.lazySrcset&&(e.setAttribute("srcset",e.dataset.lazySrcset),delete e.dataset.lazySrcset)}),e.setAttribute("src",e.dataset.lazySrc),delete e.dataset.lazySrc}function d(){document.querySelectorAll("noscript."+e).forEach(function(e){var t=e.textContent||e.innerHTML;o.loadingSupported||(void 0!==r?("picture"===e.parentNode.tagName.toLowerCase()&&(t='<source srcset="'+n+'" data-lazy-remove="true"></source>'+t),t=function(e){return e.replace(/(?:\r\n|\r|\n|\t| )srcset=/g," data-lazy-srcset=").replace(/(?:\r\n|\r|\n|\t| )src=/g,' src="'+n+'" data-lazy-src=')}(t)):t=function(e){return e.replace(/(?:\r\n|\r|\n|\t| )src=/g,' lazyload="1" src=')}(t));var a=document.createElement("div");for(a.innerHTML=t;a.firstChild;)o.loadingSupported||void 0===r||!a.firstChild.tagName||"img"!==a.firstChild.tagName.toLowerCase()&&"iframe"!==a.firstChild.tagName.toLowerCase()||r.observe(a.firstChild),e.parentNode.insertBefore(a.firstChild,e);e.parentNode.removeChild(e)}),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)})})}/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.0.1",
+  "version": "1.1.0",
   "description": "A minimal and dependency-free vanilla JavaScript polyfill for the awesome loading='lazy'-attribute.",
@@ -5,0 +5,0 @@ "main": "loading-attribute-polyfill.min.js",

README.md

@@ -13,3 +13,3 @@ # loading="lazy" attribute polyfill
 
-Fast and lightweight vanilla JavaScript polyfill for the native 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 iframes. loading="lazy" will be a huge improve for todays web performance challenges, so use and polyfill it today!
+Fast and lightweight vanilla JavaScript polyfill for the native 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 iframes. loading="lazy" will be a huge improvement for todays web performance challenges, so use and polyfill it today!
 
@@ -42,3 +42,3 @@ - Supports the standard `loading="lazy"` attribute on `image` and `iframe` elements
 
-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 `<iframe>` HTML tag:
+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:
 
@@ -121,3 +121,3 @@ ### Simple image
 
-In case you'd like to support [older versions of Microsoft EDGE, Microsoft Internet Explorer 11 or Apple Safari up to 12.0](https://caniuse.com/#feat=intersectionobserver), you would could (conditionally) load an IntersectionObserver polyfill:
+In case you'd like to support [older versions of Microsoft EDGE, Microsoft Internet Explorer 11 or Apple Safari up to 12.0](https://caniuse.com/#feat=intersectionobserver), you could (conditionally) load an IntersectionObserver polyfill:
 
@@ -124,0 +124,0 @@ <https://www.npmjs.com/package/intersection-observer>

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

95353

increased by115.73%

Number of package files

12

increased by9.09%

Lines of code

697

increased by0.87%

No dependency changes