loading-attribute-polyfill - npm Package Compare versions

Comparing version 1.4.1 to 1.5.0

CHANGELOG.md

@@ -9,6 +9,19 @@ # Changelog
 
-## [1.4.1] - 2020-01-25
+## [1.5.0] - 2020-03-15
 
 ### Changed
 
+- Updated webdriverio, commitlint and xo dependencies
+- docs: further clarifications
+- IE9 & IE10: removed .dataset reliance
+
+### Fixed
+
+- IE9 & IE10: not deleting dataset items for IE9 compatibility #GH-66
+- IE9 & IE10: added section within the docs on including the polyfill JS file at the end of the body
+
+## [1.4.1] - 2020-02-26
+
+### Changed
+
 - Updated webdriverio, husky and xo dependencies
@@ -15,0 +28,0 @@ - Optimized the npmignore file

loading-attribute-polyfill.js

@@ -78,11 +78,12 @@ /*
 
+		 // Not using .dataset within those upfollowing lines of code for polyfill independent compatibility down to IE9
 		srcsetItems.forEach(function(item) {
-			if (item.dataset.lazySrcset) {
-				item.setAttribute('srcset', item.dataset.lazySrcset);
-				delete item.dataset.lazySrcset;
+			if (item.hasAttribute('data-lazy-srcset')) {
+				item.setAttribute('srcset', item.getAttribute('data-lazy-srcset'));
+				item.removeAttribute('data-lazy-srcset'); // Not using delete .dataset here for compatibility down to IE9
 			}
 		});
 
-		lazyItem.setAttribute('src', lazyItem.dataset.lazySrc);
-		delete lazyItem.dataset.lazySrc;
+		lazyItem.setAttribute('src', lazyItem.getAttribute('data-lazy-src'));
+		lazyItem.removeAttribute('data-lazy-src'); // Not using delete .dataset here for compatibility down to IE9
 	}
@@ -169,4 +170,3 @@
 			!capabilities.loading &&
-			capabilities.scrolling &&
-			typeof document.documentElement.dataset !== 'undefined'
+			capabilities.scrolling
 		) {
@@ -219,3 +219,2 @@ // Check for IntersectionObserver support
 				typeof intersectionObserver !== 'undefined' &&
-				typeof document.documentElement.dataset !== 'undefined' &&
 				lazyArea.firstChild.tagName &&
@@ -251,3 +250,3 @@ (lazyArea.firstChild.tagName.toLowerCase() === 'img' ||
 	// Use requestAnimationFrame as this will propably cause repaints
-	if (/comp|inter/.test(document.readyState)) {
+	if (/comp|inter/.test(document.readyState)) { // https://www.w3schools.com/jsref/prop_doc_readystate.asp
 		rAFWrapper(prepareElements);
@@ -254,0 +253,0 @@ } else if ('addEventListener' in document) {

loading-attribute-polyfill.min.js

@@ -6,2 +6,2 @@ /*
  */
-!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");
+!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");

package.json

 {
   "name": "loading-attribute-polyfill",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "description": "Fast and lightweight dependency-free vanilla JavaScript polyfill for native lazy loading / the awesome loading='lazy'-attribute.",
@@ -29,13 +29,13 @@ "main": "loading-attribute-polyfill.min.js",
   "devDependencies": {
-    "@commitlint/cli": "^8.3.4",
+    "@commitlint/cli": "^8.3.5",
     "@commitlint/config-conventional": "^8.3.4",
-    "@wdio/cli": "^5.18.7",
+    "@wdio/cli": "^5.21.0",
     "@wdio/dot-reporter": "^5.18.6",
-    "@wdio/local-runner": "^5.18.7",
+    "@wdio/local-runner": "^5.21.0",
     "@wdio/mocha-framework": "^5.18.7",
-    "@wdio/sync": "^5.18.7",
+    "@wdio/sync": "^5.20.1",
     "husky": "^4.2.3",
     "prettier": "1.19.1",
-    "webdriverio": "^5.18.7",
-    "xo": "^0.27.1"
+    "webdriverio": "^5.21.0",
+    "xo": "^0.28.0"
   },
@@ -42,0 +42,0 @@ "scripts": {

README.md

@@ -43,4 +43,6 @@ # loading="lazy" attribute polyfill
 
-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:
+Afterwards you have need to wrap all of your `<img>` (and in case of `<picture>` usage the complementary `<source>` HTML tags as well) 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.
 
+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/>
+
 ### Simple image
@@ -128,11 +130,16 @@
 
+### Internet Explorer 9 & Internet Explorer 10
+
+> Internet Explorer 9 and 10 have bugs where the 'interactive' state can be fired too early before the document has finished parsing.
+
+Source: https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState
+
+That for you would need to include the polyfill the latest within the HTML code, like the nearest to the closing `body` HTML tag, as including it e.g. within the `head` section might lead to an unexpected state, so that in worst case the images might not get loaded.
+
 ### Internet Explorer 9
 
-The polyfill has been enhanced to even also provide it's functionality on IE9. But please keep in mind to even also provide the following polyfills, as it would elsewhere fall back to rewriting the image URLs correctly, but not do the lazy loading thing'ish.
+The polyfill has been enhanced to even also provide it's functionality on IE9. But please keep in mind to even also include a `matchMedia` polyfill.
 
-* Element.prototype.dataset
-* matchMedia
+And the images are still displaying an error in the demo on IE9, as most likely (from my understanding) this browser doesn't work with the HTTPS protocol any more, but the src-attributes values are correctly rewritten after all.
 
-The images are still displaying an error in the demo on IE9, as most likely (from my understanding) this browser doesn't work with the HTTPS protocol any more, but the src-attributes values are correctly rewriten after all.
-
 ## API
@@ -139,0 +146,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

85604

increased by211.98%

Number of package files

10

increased by25%

Number of lines in readme file

205

increased by3.54%

Worsened metrics

Lines of code

260

decreased by-0.38%

No dependency changes