feat: added possibility to add dynamic content elements

images and iframes

Author: mfranzke

demo/index.html

@@ -32,13 +32,10 @@
 				margin: 1rem;
 			}
 			/* dynamically added images */
-			.add-image ~ div {
+			.add-dynamic-content ~ div {
 				min-height: 100vh;
-				position: relative;
-			}
-			.add-image ~ div img {
-				position: absolute;
-				bottom: 0;
+				display: flex;
+				align-items: end;
 			}
 
 			/* Displaying the images on smaller viewports */
@@ -198,16 +195,17 @@ <h1>
 				title="sample document"
 			></iframe>
 
-			<h2>dynamic images</h2>
+			<h2>dynamic images &amp; iframes</h2>
 			<p>
-				Add <code>div</code> element and image underneath (scroll down after
-				pressing the following button)
+				Add <code>div</code> element and included image and iframe underneath
+				(scroll down after pressing the following button)
 			</p>
-			<button type="button" class="add-image">
-				Add dynamic image underneath
+			<button type="button" class="add-dynamic-content">
+				Add dynamic image and iframe underneath
 			</button>
 		</main>
 		<script type="module" src="index.js"></script>
+		></script>
 		<script>
 			if ("serviceWorker" in navigator) {
 				// Differentiate in between the ServiceWorker scripts for the different browser capabilities / support

demo/index.js

@@ -1,2 +1,38 @@
 import loadingAttributePolyfill from '../dist/loading-attribute-polyfill.module.js';
 
+// Test for dynamically inserted images and iframes
+let addDynamicContent = (event) => {
+	let divElement = document.createElement('div'),
+		imageElement = document.createElement('img'),
+		iframeElement = document.createElement('iframe');
+
+	imageElement.setAttribute(
+		'src',
+		'img/lazyimg-src-loadinglazy.250x150.guetzli.jpg?loading=lazy&image-width=250&image-height=150'
+	);
+	imageElement.setAttribute('loading', 'lazy');
+	imageElement.setAttribute('alt', '..');
+	imageElement.setAttribute('width', '250');
+	imageElement.setAttribute('height', '150');
+
+	iframeElement.setAttribute('src', 'iframe.html?loading=lazy');
+	iframeElement.setAttribute('loading', 'lazy');
+	iframeElement.setAttribute('title', '..');
+	iframeElement.setAttribute('width', '320');
+	iframeElement.setAttribute('height', '180');
+
+	divElement.appendChild(imageElement);
+	divElement.appendChild(iframeElement);
+
+	document.querySelector('main').insertAdjacentElement('beforeend', divElement);
+
+	// Call for preparing the sample image element included the latest
+	loadingAttributePolyfill.prepareElement(divElement.querySelector('img'));
+	loadingAttributePolyfill.prepareElement(divElement.querySelector('iframe'));
+
+	event.preventDefault();
+};
+
+document
+	.querySelector('button.add-dynamic-content')
+	.addEventListener('click', addDynamicContent);