docs(demo): optimized dynamic images example

Author: mfranzke

demo/index.html

@@ -31,6 +31,15 @@
 			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 {
@@ -163,7 +172,13 @@ <h1>
 			</noscript>
 
 			<h2>dynamic images</h2>
-			<button type="button" class="add-image">Add image</button>
+			<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

demo/index.js

@@ -2,7 +2,8 @@ import loadingAttributePolyfill from '../dist/loading-attribute-polyfill.module.
 
 // Test for dynamically inserted images
 let addImage = (event) => {
-	let noscriptElement = document.createElement('noscript'),
+	let divElement = document.createElement('div'),
+		noscriptElement = document.createElement('noscript'),
 		imageElement = document.createElement('img');
 
 	noscriptElement.classList.add('loading-lazy');
@@ -15,10 +16,11 @@ let addImage = (event) => {
 
 	noscriptElement.appendChild(imageElement);
 
-	document
-		.querySelector('main')
-		.insertAdjacentElement('beforeend', noscriptElement);
+	divElement.appendChild(noscriptElement);
 
+	document.querySelector('main').insertAdjacentElement('beforeend', divElement);
+
+	// Call for preparing the sample image element included the latest
 	loadingAttributePolyfill.prepareElement(
 		document.querySelector('main noscript.loading-lazy')
 	);