⚡️ Loading imgs background in css after main css

index.html

@@ -5,7 +5,10 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
 
-        <link rel="stylesheet" type="text/css" href="stylesheet.css">
+        <link rel="stylesheet" type="text/css" href="stylesheet-main.css">
+        <noscript>
+            <link rel="stylesheet" type="text/css" href="stylesheet-imgs.css">
+        </noscript>
 
         <title>Florian Sylvain</title>
     </head>

script.js

@@ -17,6 +17,17 @@ const projectsIDs = Array.from(projectsContentList)
 
 let lastScrollTop = window.pageYOffset;
 
+function loadCSS() {
+    "use strict";
+    const stylesheet = document.createElement('link');
+    stylesheet.href = 'stylesheet-imgs.css';
+    stylesheet.rel = 'stylesheet';
+    stylesheet.type = 'text/css';
+    document.querySelector('head').appendChild(stylesheet);
+}
+
+loadCSS();
+
 function toAddClass(toClass, inClass) {
     "use strict";
 

stylesheet-imgs.css

@@ -0,0 +1,44 @@
+.pong2D {
+    background: center / contain no-repeat url('assets/imgs/Pong2D.webp'),
+                center / cover url('assets/imgs/Pong2D_blur.webp');
+}
+
+.pong2D:hover {
+    background: center / cover no-repeat url('assets/imgs/Pong2D-video.webp');
+}
+
+.pong3D {
+    background: center / contain no-repeat url('assets/imgs/Pong3D.webp'),
+                center / cover url('assets/imgs/Pong3D_blur.webp');
+}
+
+.pong3D:hover {
+    background: center / cover no-repeat url('assets/imgs/Pong3D-video.webp');
+}
+
+.risitasBot {
+    background: center / contain no-repeat url('assets/imgs/RisitasBot.webp'),
+                center / cover url('assets/imgs/RisitasBot_blur.webp');
+}
+
+.risitasBot:hover {
+    background: center / cover no-repeat url('assets/imgs/RisitasBot-video.webp');
+}
+
+.riverwood {
+    background: center / contain no-repeat url('assets/imgs/Riverwood.webp'),
+                center / cover url('assets/imgs/Riverwood_blur.webp');
+}
+
+.riverwood:hover {
+    background: center / cover no-repeat url('assets/imgs/Riverwood-video.webp');
+}
+
+.thesesFr {
+    background: center / contain no-repeat url('assets/imgs/ThesesFr.webp'),
+                center / cover url('assets/imgs/ThesesFr_blur.webp');
+}
+
+.thesesFr:hover {
+    background: center / cover no-repeat url('assets/imgs/ThesesFr-video.webp');
+}

stylesheet-main.css

@@ -497,51 +497,6 @@ a {
     color: #3AC414;
 }
 
-.pong2D {
-    background: center / contain no-repeat url('assets/imgs/Pong2D.webp'),
-                center / cover url('assets/imgs/Pong2D_blur.webp');
-}
-
-.pong2D:hover {
-    background: center / cover no-repeat url('assets/imgs/Pong2D-video.webp');
-}
-
-.pong3D {
-    background: center / contain no-repeat url('assets/imgs/Pong3D.webp'),
-                center / cover url('assets/imgs/Pong3D_blur.webp');
-}
-
-.pong3D:hover {
-    background: center / cover no-repeat url('assets/imgs/Pong3D-video.webp');
-}
-
-.risitasBot {
-    background: center / contain no-repeat url('assets/imgs/RisitasBot.webp'),
-                center / cover url('assets/imgs/RisitasBot_blur.webp');
-}
-
-.risitasBot:hover {
-    background: center / cover no-repeat url('assets/imgs/RisitasBot-video.webp');
-}
-
-.riverwood {
-    background: center / contain no-repeat url('assets/imgs/Riverwood.webp'),
-                center / cover url('assets/imgs/Riverwood_blur.webp');
-}
-
-.riverwood:hover {
-    background: center / cover no-repeat url('assets/imgs/Riverwood-video.webp');
-}
-
-.thesesFr {
-    background: center / contain no-repeat url('assets/imgs/ThesesFr.webp'),
-                center / cover url('assets/imgs/ThesesFr_blur.webp');
-}
-
-.thesesFr:hover {
-    background: center / cover no-repeat url('assets/imgs/ThesesFr-video.webp');
-}
-
 .degree {
     font-variation-settings: 'wght' 400;
 }