Merge branch 'main' of https://github.com/mfranzke/loading-attribute-polyfill-with-serviceworker

mfranzke · mfranzke · commit 20b2b0a66946 · 2021-12-28T06:33:52.000+01:00
diff --git a/demo/index.html b/demo/index.html
@@ -47,7 +47,11 @@
 		<link rel="stylesheet" href="../dist/loading-attribute-polyfill.css" />
 
 		<!-- Include polyfill for custom elements and built-in extends support -->
-		<script src="//unpkg.com/@ungap/custom-elements"></script>
+		<script
+			src="https://unpkg.com/@ungap/custom-elements@1.0.0/min.js"
+			integrity="sha384-Qnq8e4Wl3sSEVAjRedbJV4qEzrdUTWrz34w5/aTeTwdbf71mHIS7+LbnfDdazp+6"
+			crossorigin="anonymous"
+		></script>
 	</head>
 	<body>
 		<header>
diff --git a/demo/index.js b/demo/index.js
@@ -5,17 +5,22 @@ let addDynamicContent = (event) => {
 		iframeElement = document.createElement('iframe');
 
 	imageElement.setAttribute('is', 'loading-image');
+	// We're using a differing string at the end of the query than the regular one embedded directly into the page
 	imageElement.setAttribute(
 		'src',
-		'img/lazyimg-src-loadinglazy.250x150.guetzli.jpg?loading=lazy&image-width=250&image-height=150&dynamic'
+		'img/lazyimg-src-loadinglazy.250x150.guetzli.jpg?loading=lazy&image-width=250&image-height=150&dynamic-example-query'
 	);
 	imageElement.setAttribute('loading', 'lazy');
 	imageElement.setAttribute('alt', '..');
 	imageElement.setAttribute('width', '250');
 	imageElement.setAttribute('height', '150');
 
 	iframeElement.setAttribute('is', 'loading-iframe');
-	iframeElement.setAttribute('src', 'iframe.html?loading=lazy&dynamic');
+	// We're using a differing string at the end of the query than the regular one embedded directly into the page
+	iframeElement.setAttribute(
+		'src',
+		'iframe.html?loading=lazy&dynamic-example-query'
+	);
 	iframeElement.setAttribute('loading', 'lazy');
 	iframeElement.setAttribute('title', '..');
 	iframeElement.setAttribute('width', '320');
