fix(html): update srcset-resolutions demo (#694)

- related to mdn/content#3397 The PR - adds script to show actual loaded image name on screen - runs Prettier on the file On touch devices developer tools are not available. The change makes easy to realize which image has been fetched and loaded by the browser.
mdn · Dec 10, 2023 · 558306e · 558306e
1 parent 1721dd5
commit 558306e
Showing 1 changed file with 26 additions and 14 deletions.
diff --git a/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html b/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html
@@ -1,25 +1,37 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en-us">
   <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width">
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
     <title>Responsive HTML images demo</title>
     <style>
-
       img {
         width: 320px;
       }
-
     </style>
   </head>
   <body>
-
-
-        <img srcset="elva-fairy-320w.jpg,
-                     elva-fairy-480w.jpg 1.5x,
-                     elva-fairy-640w.jpg 2x"
-             src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy"> 
-
-
+    <img
+      srcset="
+        elva-fairy-320w.jpg,
+        elva-fairy-480w.jpg 1.5x,
+        elva-fairy-640w.jpg 2x
+      "
+      src="elva-fairy-640w.jpg"
+      alt="Elva dressed as a fairy"
+      id="img"
+      onload="showUrl()"
+    />
+    <script>
+      function showUrl() {
+        const img = document.getElementById("img");
+        const p = document.createElement("p");
+        const fileName = img.currentSrc?.substring(
+          img.currentSrc.lastIndexOf("/"),
+        );
+        p.textContent = `Loaded: ${fileName}`;
+        document.body.appendChild(p);
+      }
+    </script>
   </body>
-</html>
+</html>