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-image ~ div {
				min-height: 100vh;
				position: relative;
			}
			.add-image ~ div img {
				position: absolute;
				bottom: 0;
			}

			/* Displaying the images on smaller viewports */
			img {
				max-width: 40vw;
				height: auto;
			}
		</style>
		<link rel="stylesheet" href="../dist/loading-attribute-polyfill.css" />
	</head>
	<body>
		<header>
			<h1>
				<a href="https://github.com/mfranzke/loading-attribute-polyfill/"
					>loading-attribute-polyfill</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 -->
			<noscript class="loading-lazy">
				<img
					src="https://mfranzke.github.io/loading-attribute-polyfill/demo/img/lazyimg-src-loadinglazy.250x150.guetzli.jpg"
					loading="lazy"
					alt=""
					width="250"
					height="150"
				/>
			</noscript>

			<!-- Load an image right away instead of lazy-loading -->
			<img
				src="https://mfranzke.github.io/loading-attribute-polyfill/demo/img/img-src-loadingeager.250x150.guetzli.jpg"
				loading="eager"
				alt=""
				width="250"
				height="150"
			/>

			<!-- Lazy-load images in <picture> -->
			<noscript class="loading-lazy">
				<picture>
					<source
						media="(min-width: 40em)"
						srcset="
							https://mfranzke.github.io/loading-attribute-polyfill/demo/img/lazypicture-media1x-loadinglazy.250x150.guetzli.jpg 1x,
							https://mfranzke.github.io/loading-attribute-polyfill/demo/img/lazypicture-media2x-loadinglazy.500x300.guetzli.jpg 2x
						"
					/>
					<source
						srcset="
							https://mfranzke.github.io/loading-attribute-polyfill/demo/img/lazypicture-1x-loadinglazy.250x150.guetzli.jpg 1x,
							https://mfranzke.github.io/loading-attribute-polyfill/demo/img/lazypicture-2x-loadinglazy.500x300.guetzli.jpg 2x
						"
					/>
					<img
						src="https://mfranzke.github.io/loading-attribute-polyfill/demo/img/lazypicture-imgsrc-loadinglazy.250x150.guetzli.jpg"
						loading="lazy"
						alt=""
						width="250"
						height="150"
					/>
				</picture>
			</noscript>

			<!-- Lazy-load an image that has srcset specified -->
			<noscript class="loading-lazy">
				<img
					src="https://mfranzke.github.io/loading-attribute-polyfill/demo/img/lazyimg-src-loadinglazy.250x150.guetzli.jpg"
					srcset="
						https://mfranzke.github.io/loading-attribute-polyfill/demo/img/lazyimg-srcset1024w-loadinglazy.1024x614.guetzli.jpg 1024w,
						https://mfranzke.github.io/loading-attribute-polyfill/demo/img/lazyimg-srcset640w-loadinglazy.640x384.guetzli.jpg    640w,
						https://mfranzke.github.io/loading-attribute-polyfill/demo/img/lazyimg-srcset320w-loadinglazy.320x192.guetzli.jpg    320w
					"
					sizes="(min-width: 36em) 33.3vw, 100vw"
					alt=""
					loading="lazy"
					width="250"
					height="150"
				/>
			</noscript>

			<!-- Lazy-load an offscreen iframe when the user scrolls near it -->
			<noscript class="loading-lazy">
				<iframe
					src="https://player.vimeo.com/video/20997150"
					width="320"
					height="180"
					loading="lazy"
					title="vimeo sample video"
				></iframe>
			</noscript>

			<h2>dynamic images</h2>
			<p>
				Add <code>div</code> element and image underneath (scroll down after
				pressing the following button)
			</p>
			<button type="button" class="add-image">
				Add dynamic image underneath
			</button>
		</main>
		<!-- Including other optional polyfills depending on expected browser support scope -->
		<script
			src="https://polyfill.io/v3/polyfill.min.js?flags=always&features=IntersectionObserver%2CmatchMedia"
			integrity="sha384-0lS88tVtaG/wFBGhLbltQH+YsokYzFR53GbESKurNNjMEVpukFjECmLmebK9aMIf"
			crossorigin="anonymous"
		></script>
		<script type="module" src="index.js"></script>
		<!-- Even though that it's recommended to omit the type on the following script tag, we're keeping it for older browser compatibility -->
		<script
			type="text/javascript"
			src="../dist/loading-attribute-polyfill.umd.js"
			nomodule
		></script>
	</body>
</html>