demo/index.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="x-ua-compatible" content="ie=edge" />
		<title>loading-attribute polyfill demo</title>

		<meta
			name="viewport"
			content="width=device-width, initial-scale=1, shrink-to-fit=no"
		/>

		<style>
			/*** These are demo related styles ***/
			body {
				font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
					Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
					"Segoe UI Symbol";
			}

			.scrolling-advice span {
				display: block;
				text-align: center;
				margin-top: 1rem;
				font-size: 2rem;
			}

			/* Defing the header to be two screen sizes height at minimum to ensure that the images within the main section are being loaded lazy */
			body > header {
				min-height: 200vh;
			}

			body > main img,
			body > main iframe {
				margin: 1rem;
			}

			/* dynamically added images */
			.add-dynamic-content ~ div {
				min-height: 200vh;
				display: flex;
				align-items: flex-end;
			}

			/* Displaying the images on smaller viewports */
			img {
				max-width: 40vw;
				height: auto;
			}
		</style>
		<link
			rel="stylesheet"
			href="../dist/loading-attribute-polyfill-with-serviceworker.css"
		/>

		<!-- Include polyfill for custom elements and builtin extends support -->
		<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>
			<h1>
				<a
					href="https://github.com/mfranzke/loading-attribute-polyfill-with-serviceworker/"
					>loading-attribute polyfill (with Service Worker)</a
				>
				demo page
			</h1>
			<p>
				The sample images embedded into this document are including textual
				information on their embedding technique, like the HTML tag, attributes
				and pixel density to show you that the correct image has been loaded.
			</p>

			<p>
				Notice: We previously had images included here in the first visible
				viewport aka "above the fold" as well for testing purposes - including
				them this way on a demo page was misleading, compare to the following
				advice.
			</p>
			<blockquote>
				<p>
					You should avoid setting `loading=lazy` for any images that are in the
					first visible viewport.<br />
					It is recommended to only add `loading=lazy` to images which are
					positioned below the fold, if possible.
				</p>
				<p>
					These are some of the relevant remarks within the section "Avoid
					lazy-loading images that are in the first visible viewport" in the
					article
					<cite
						><a
							href="https://web.dev/browser-level-image-lazy-loading/#avoid-lazy-loading-images-that-are-in-the-first-visible-viewport"
							>Browser-level image lazy-loading for the web</a
						></cite
					>
					published on web.dev
				</p>
			</blockquote>

			<p class="scrolling-advice">
				The following whitespace is included as a threshold,
				<strong>please scroll down to the very end of this demo page</strong> to
				see these images and iframe content being loaded by the polyfill on
				<a href="https://caniuse.com/loading-lazy-attr">unsupported browsers</a>
				(hint:
				<strong
					>Your browser
					<script type="text/javascript">
						if (
							"loading" in HTMLImageElement.prototype ||
							"loading" in HTMLIFrameElement.prototype
						) {
							document.write(
								"supports the following native loading lazy capabilities: "
							);

							if ("loading" in HTMLImageElement.prototype) {
								document.write("images");

								if ("loading" in HTMLIFrameElement.prototype) {
									document.write(", iframes");
								}
							} else if ("loading" in HTMLIFrameElement.prototype) {
								document.write("iframes");
							}
						} else {
							document.write(
								"doesn't support the native loading lazy capabilities"
							);
						}
					</script> </strong
				>)
				<span aria-hidden="true">⬇</span>
			</p>
		</header>

		<main>
			<!-- Lazy-load an offscreen image when the user scrolls near it -->
			<img
				src="img/lazyimg-src-loadinglazy.250x150.guetzli.jpg?loading=lazy&image-width=250&image-height=150"
				loading="lazy"
				alt=""
				width="250"
				height="150"
				is="loading-image"
			/>

			<!-- Load an image right away instead of lazy-loading -->
			<img
				src="img/img-src-loadingeager.250x150.guetzli.jpg"
				loading="eager"
				alt=""
				width="250"
				height="150"
			/>

			<!-- Lazy-load images in <picture> -->
			<picture>
				<source
					media="(min-width: 40em)"
					srcset="
						img/lazypicture-media1x-loadinglazy.250x150.guetzli.jpg?loading=lazy&image-width=250&image-height=150 1x,
						img/lazypicture-media2x-loadinglazy.500x300.guetzli.jpg?loading=lazy&image-width=500&image-height=300 2x
					"
				/>
				<source
					srcset="
						img/lazypicture-1x-loadinglazy.250x150.guetzli.jpg?loading=lazy&image-width=250&image-height=150 1x,
						img/lazypicture-2x-loadinglazy.500x300.guetzli.jpg?loading=lazy&image-width=500&image-height=300 2x
					"
				/>
				<img
					src="img/lazypicture-imgsrc-loadinglazy.250x150.guetzli.jpg?loading=lazy&image-width=250&image-height=150"
					loading="lazy"
					alt=""
					width="250"
					height="150"
					is="loading-image"
				/>
			</picture>

			<!-- Lazy-load an image that has srcset specified -->
			<img
				src="img/lazyimg-src-loadinglazy.250x150.guetzli.jpg?loading=lazy&image-width=250&image-height=150"
				srcset="
					img/lazyimg-srcset1024w-loadinglazy.1024x614.guetzli.jpg?loading=lazy&image-width=1024&image-height=614 1024w,
					img/lazyimg-srcset640w-loadinglazy.640x384.guetzli.jpg?loading=lazy&image-width=640&image-height=384     640w,
					img/lazyimg-srcset320w-loadinglazy.320x192.guetzli.jpg?loading=lazy&image-width=320&image-height=192     320w
				"
				sizes="(min-width: 36em) 33.3vw, 100vw"
				alt=""
				loading="lazy"
				width="250"
				height="150"
				is="loading-image"
			/>

			<!-- Lazy-load an offscreen iframe when the user scrolls near it -->
			<iframe
				src="iframe.html?loading=lazy"
				width="320"
				height="180"
				loading="lazy"
				title="sample document"
				is="loading-iframe"
			></iframe>

			<h2>dynamic images &amp; iframes</h2>
			<p>
				Add <code>div</code> element and included image and iframe underneath
				(scroll down after pressing the following button)
			</p>
			<button type="button" class="add-dynamic-content">
				Add dynamic image and iframe underneath
			</button>
		</main>
		<!-- The polyfill itself is being included in the following script -->
		<script type="module" src="index.js"></script>
		<!-- Register a Service Worker that intercepts the network requests to prevent the images and iframe content being requested -->
		<script>
			if ("serviceWorker" in navigator) {
				// Differentiate in between the Service Worker scripts for the different browser capabilities / support
				navigator.serviceWorker.register(
					"../loading-attribute-polyfill-with-serviceworker.sw.js?loading-images=" +
						("loading" in HTMLImageElement.prototype) +
						"&loading-iframes=" +
						("loading" in HTMLIFrameElement.prototype)
				);
			}
		</script>
	</body>
</html>