with great baby comes great responsibility umm yeah.

404.html

@@ -110,6 +110,7 @@
                     </div>
 
                     <div class="cache" id="image-container"> 
+                        <img src="/images/logo-long-bk.svg" alt="[Header Logo]" loading="eager">
                         <img src="/images/404.svg" alt="Background image">
                     </div>
 

common/footer.html

@@ -69,7 +69,7 @@
 </script>
 
 <div id="site-info" class="hidden">
-    <p>v22.6 | <a href="https://github.com/ThakshilaDamsak/ThakshilaDamsak.github.io" target="_blank">GitHub Repository</a></p>
+    <p>v22.7 | <a href="https://github.com/ThakshilaDamsak/ThakshilaDamsak.github.io" target="_blank">GitHub Repository</a></p>
 </div>
 
 <script>

human/content.js

@@ -1,15 +1,67 @@
-    // Fetch the content of the content HTML file
-fetch('./content.html')
+// Get the container element for the images
+const imageContainer = document.getElementById('image-container');
+
+// Get all the image elements inside the container
+const imageElements = Array.from(imageContainer.getElementsByTagName('img'));
+
+// Create an array of promises for each image element
+const imagePromises = imageElements.map(image => {
+  // Return a new promise that resolves when the image loads or is already cached
+  return new Promise((resolve, reject) => {
+    // Check if the image is already cached
+    if (image.complete) {
+      // Resolve immediately
+      resolve();
+    } else {
+      // Add event listeners for load and error
+      image.addEventListener('load', resolve);
+      image.addEventListener('error', reject);
+    }
+  })
+  .catch(error => {
+    // Handle the error
+    console.error(error);
+    alert('Something went wrong. Please try again.');
+    // You can also try to reload the image here, or skip it and resolve anyway
+  });
+});
+
+// Wait for all the promises to resolve
+Promise.all(imagePromises).then(() => {
+  // All the images have loaded or failed gracefully or were already cached
+  console.log('All images handled');
+
+  // Fetch the content of the content HTML file
+  fetch('/human/content.html')
     .then(response => response.text())
     .then(html => {
-    // Insert the content HTML into the container
-    document.getElementById('page-content').innerHTML = html;
+      // Insert the content HTML into the container
+      document.getElementById('page-content').innerHTML = html;
 
-    // Execute JavaScript code within the container
-    const scriptElements = Array.from(document.getElementById('page-content').getElementsByTagName('script'));
-    scriptElements.forEach(script => {
+      // Execute JavaScript code within the container
+      const scriptElements = Array.from(document.getElementById('page-content').getElementsByTagName('script'));
+      scriptElements.forEach(script => {
         const newScript = document.createElement('script');
         newScript.textContent = script.textContent;
         document.body.appendChild(newScript);
+      });
     });
-    });
+});
+
+
+
+window.onload = function() {
+  var currentURL = window.location.href;
+  if (!currentURL.endsWith("#Oh-ma-Gaad-Noo-Wayyyayyaayyy")) {
+  var newURL = currentURL + "#Oh-ma-Gaad-Noo-Wayyyayyaayyy";
+  history.replaceState({}, null, newURL);
+  }
+  };
+
+  window.onpopstate = function(event) {
+  var currentURL = window.location.href;
+  if (currentURL.endsWith("##Oh-ma-Gaad-Noo-Wayyyayyaayyy")) {
+  var newURL = currentURL.replace("##Oh-ma-Gaad-Noo-Wayyyayyaayyy", "");
+  history.replaceState({}, null, newURL);
+  }
+  };

human/index.html

@@ -104,6 +104,10 @@
 
                 <div class="page-content" id="page-content">
 
+                    <div class="cache" id="image-container"> 
+                        <img src="/images/logo-long-bk.svg" alt="[Header Logo]" loading="eager">
+                    </div>
+
                     <div class="page-loading-home pl">
                         <dev class="loading-spinner"></dev>
                         <span> Loading... </span>

index.html

@@ -95,6 +95,7 @@
                 <div class="bg">
                     <div class="overlay"> </div>
                     <div class="cache" id="image-container"> 
+                        <img src="/images/logo-long-bk.svg" alt="[Header Logo]" loading="eager">
                         <img src="/images/background-4.svg" alt="Background image">
                         <img src="images/damsak-logo.jpg" alt="[Logo with background]">
                         <img src="images/cyberthenuk.png" alt="[Logo]">